代码高亮

最后更新于:2019-12-17

想要实现小程序的代码高亮,可以参考这一篇《基于 wxParse 实现 WordPress 版小程序代码高亮》。

第一步:需要下载修改版 wxParse ,解压替换掉小程序源码包里的 wxParse 目录。

第二步:需要对内容进行转换解析。打开 mixins.js 文件,搜索:WxParse.wxParse('article', 'html', res.content.rendered, this,5) ,更改为:


let contents = res.content.rendered.replace(/<pre[^>]*><code class=\"([^\s]*)\">/g, "<pre class=\"pure-highlightjs $1\">").replace(/<\/code><\/pre>/g, "</pre>")
WxParse.wxParse('article', 'html', contents, this,5)

第三步:需要引用代码高亮样式。打开 detail.wxss 引用样式 @import "../../wxParse/prism.wxss";

第四步:添加内容时,需要使用高亮代码:


<pre class="pure-highlightjs"><code class="高亮语言,比如php,javascript等">
高亮代码部分...
</code></pre>

完成以上步骤,就可以实现小程序内容代码高亮。