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

说明

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

猜您想看

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...