微信小程序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日,已超过549天没有更新,若内容或图片失效,请留言反馈。

说明

最近写了一个微信小程序,使用了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)

猜您想看

  • 同步更新Gitee和GitHub仓库代码

    学校的网络不好,GitHub有时就上不去了,所以需要同步更新Gitee和GitHub两个仓库的代码,做个备份。

    2019年07月23日
  • ChatGPT使用体验

    ChatGPT火了好一阵子了,很多都是网上的教程,我自己注册了一个,分享一下国内的使用办法以及注册流程。

    2023年02月20日
  • 绕过校园网web认证

    校园网流量非常贵,不知道其他学校是什么情况, 本校10元3G,每个月给2.5G免费流量,且晚上十二点到早上六点断网。 学校的宽带也很贵,20M的一个月60,10M的一个月50,晚上十一点半到早上六点断网。

    2019年07月12日
  • AMD处理器无法安装Android Studio虚拟机解决办法

    电脑的CPU是锐龙R5 1600X,开发Android的时候发现无法安装AVD(安卓虚拟机),找了许久,终于解决。

    2019年10月17日
  • WordPress无法登陆后台解决办法

    配置了CDN之后,突然发现,WordPress后台无法登录了,记录一下

    2021年10月01日
  • Go语言环境搭建(CentOS 7)

    最近要用到go语言编写的一个开源项目,需要自己编译一下,所以做个笔记。

    2019年03月10日

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...