代码高亮

最后更新于：2019-12-17

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

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

第二步：需要对内容进行转换解析。搜索：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>

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

丸子小程序资讯版已经提供了代码高亮版本，但是考虑到大部分小程序都不需要代码高亮功能，因此，默认是未启用代码高亮，如果需要启用微信小程序资讯版代码高亮，方法如下：

1、修改 html2json.js 文件，把 //var highlight = require(‘./highlight.js’); 斜杠注释删掉

2、修改 detail.wxss 文件，引入代码高亮样式 @import “../../wxParse/prism.wxss”;

3、修改 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)