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

说明

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

猜您想看

MacOS配置homebrew

前两天买的Mac mini到货了,正好需要配置环境,折腾了一下,特此记录。

01

Nikon Z5 内置滤镜效果

记录Nikon Z5相机的内置滤镜效果

02

elementUI选择框实现全选功能

如题,前两天写一个功能的时候需要用到选择框的多选功能,记录一下

03

漫步者M230无线蓝牙音箱入手体验

之前用的是漫步者U20,是一个90块的小音箱,只有3W,用了四年,最近有刺啦声,加上后面的线感觉很乱,就换了M230蓝牙音箱。

04

钻石——20世纪全球最精彩的营销骗局!

还记得小李子的盛世容颜吗?

05

Alist自定义编译打包docker镜像

最近帮别人搭建alist,需要定制化一些内容,基于源码编译安装,打包成docker镜像,并且发布到dockehub上。

06

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...