微信小程序mp-html插件使用atom one dark代码高亮
如默
撰写于 2023年 07月 18 日

说明

最近写了一个微信小程序,使用了mp-html插件来解析markdown文章,记录一下如何修改代码高亮。

步骤

先附上mp-html官网:mp-html

官方文档上其实写了方法,这样写的:

本插件的高亮功能依赖于 prismjs,默认配置中仅支持 html、css、c-like、javascript 语言和 Tomorrow Night 主题,如果需要更多语言或更换主题请前往 官网 下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件(prismjs 的插件大多涉及 dom 操作,基本不可用,请勿选择)

但官方文档没具体写后续怎么操作,而且prismjs官方提供的主题太少了,并且很丑,下面记录一下:

1,前往prismjs官方下载页面,prismjs

2,选择你需要的语言高亮,不要选择Plugins下的内容,选好之后,点击download js,替换xxx\node_modules\mp-html\plugins\highlight里的prism.min.js,文件名保持一致。

3,前往这里:prism-themes,下载themes下的prism-one-dark.css,用这个替换xxx\node_modules\mp-html\plugins\highlight里的prism.css,文件名保持一致。

3,划重点:切换到xxx\node_modules\mp-html这个目录下,执行npm install && npm run build:weixin,执行结束之后,在微信开发者工具中,点击顶部菜单工具,然后点击构建npm

这样,代码高亮就替换了,路径里的xxx是微信小程序文件夹

微信小程序mp-html插件使用atom one dark代码高亮

温馨提示:

本文最后更新于2023年07月18日,已超过362天没有更新,若内容或图片失效,请留言反馈。

说明

最近写了一个微信小程序,使用了mp-html插件来解析markdown文章,记录一下如何修改代码高亮。

步骤

先附上mp-html官网:mp-html

官方文档上其实写了方法,这样写的:

本插件的高亮功能依赖于 prismjs,默认配置中仅支持 html、css、c-like、javascript 语言和 Tomorrow Night 主题,如果需要更多语言或更换主题请前往 官网 下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件(prismjs 的插件大多涉及 dom 操作,基本不可用,请勿选择)

但官方文档没具体写后续怎么操作,而且prismjs官方提供的主题太少了,并且很丑,下面记录一下:

1,前往prismjs官方下载页面,prismjs

2,选择你需要的语言高亮,不要选择Plugins下的内容,选好之后,点击download js,替换xxx\node_modules\mp-html\plugins\highlight里的prism.min.js,文件名保持一致。

3,前往这里:prism-themes,下载themes下的prism-one-dark.css,用这个替换xxx\node_modules\mp-html\plugins\highlight里的prism.css,文件名保持一致。

3,划重点:切换到xxx\node_modules\mp-html这个目录下,执行npm install && npm run build:weixin,执行结束之后,在微信开发者工具中,点击顶部菜单工具,然后点击构建npm

这样,代码高亮就替换了,路径里的xxx是微信小程序文件夹


赞 (0)

猜您想看

  • 华为MateView 28.2显示器一周评测

    前两天之前买的AOC显示器出了一点故障,总是无法识别主机信号,动不动就无信号了,送回京东自营换新了,临时买了一个华为的显示器顶几天,发现了很多问题,分享一下。

    2023年01月23日
  • AOC U28G2U显示器入手体验

    之前用的是两台AOC 24G2,1080P 144的显示器,公司用的是一台2K显示器外接,回家再看24G2的时候感觉好糊,加上相机照片的分辨率都在6000*4000之上了,还是需要一台高分辨率显示器,特此记录。

    2022年10月25日
  • Logitech G HUB无法安装解决方案

    之前驱动安装上了,但是后来重做了一次系统,然后驱动就一直处于初始化状态,或者就显示磁盘已满。后来找到了解决方法,特此记录。

    2021年02月25日
  • 宝塔面板安装OLAINDEX 6.0教程

    之前使用过OLAINDEX这个程序,当时还是4.0,现在已经更新到6.0版本,安装的过程和之前有一些变化,所以均为新版安装不同之处的文字记录,无图

    2021年04月08日
  • Android Studio报错error:connection timed out

    在构建Android项目的时候,底部的状态栏总是会显示connection timed out或Could not download xxx等问题,这是由于国内网络问题导致第三方依赖下载不上,特此记录其解决办法。

    2019年10月18日
  • Python虚拟环境pipenv使用说明

    最近需要写好几个Python项目,每个项目的环境都不一样,需要用虚拟环境,记录一下。

    2023年06月18日

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论

Vaptcha 初始化中...