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

说明

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

猜您想看

  • 黑神话悟空Intel Arc A770显卡性能测试

    最近黑神话悟空非常火,正好Steam上可以下载官方的测试工具,来看看硬件可以跑到什么帧数,正好我怕我的A770不行,测试一下。

    2024年08月14日
  • Mac电脑使用SSH连接服务器

    Mac电脑自带终端,可以直接使用这个连接服务器,也可以使用第三方的软件来安装,但是Termius收费,也懒得安装了,记录一下

    2023年10月18日
  • Android Studio报错error:connection timed out

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

    2019年10月18日
  • Python使用turtle画玫瑰、哆啦A梦、小猪佩奇

    前两天无聊,情人节画爱心的时候,就顺便画了玫瑰花、哆啦A梦和佩奇,现在附上源码。

    2022年08月10日
  • Windows 11系统最新升级攻略(不兼容硬件也可升级)

    AMD一代锐龙不支持升级win11,安装方式记录

    2021年10月08日
  • 阿里云CDN加速OSS方案

    用户直接访问OSS资源,访问速度会受到OSS的下行带宽以及Bucket地域的限制。如果通过CDN来访问OSS资源,带宽上限更高,并且可以将OSS的资源缓存至就近的CDN节点,通过CDN节点进行分发,访问速度更快,且费用更低

    2021年04月28日

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...