给基于 wxParse的WordPress 版小程序添加代码高亮

最近一直在搞小程序中的代码高亮，测试了 towxml、richText 和 html2json 插件都不太满意，没办法，自己摸索吧。最终我选择了基于 wxParse 和 Prism 来实现代码高亮，简单的思路就是通过判断当前标签是否是“pre”，如果是，就将“pre”标签中的代码段用 Prism 的 API 来实现高亮，再将高亮后的内容返回，最后都交给 wxParse 来解析 html。有了思路，下面就开始干！

温馨提示

点击这里在小程序中阅读文章

一、准备工作1、代码段的标签

在 WordPress 中，我用的是自己改写过的 HighlightJs 插件，因此代码段的标签是这样的：

这是两层标签，在之前那篇讲代码显示的文章中，我将代码段的这两层标签替换为一层“code”标签，这里我不用“code”改用“pre”。为什么呢？“code”标签有时候我会用来标记一些简短的代码内容，而“pre”则用来标记代码段。

怎么替换两层标签为一个“pre”呢？还是用之前那篇文章中讲到的“replace”大法。就是在“ ”中修改传给 的内容：

可以看到最后一行的两个“replace()”函数就将 替换为了 ，也就是代码语言的定义放到了“pre”标签的 class 中，这个之后会用到。而那个“ ”也是为了区分代码端和普通“pre”标签所添加的 class。

2、代码换行问题

在之前的文章中，为了解决代码段换行问题，我将代码段中的“\r\n”换成了“ ”，在用了 Prism 代码高亮后肯定不能再这样替换了，并且使用了 Prism 后代码段中的换行才能让代码正常显示，但是呢，wxParse 默认是替换掉所有的换行，包括“\n”和“\r\n”。经过观察 WordPress 文章源代码后发现除了代码段，文章其余的换行都是“\n”，因此，对 wxParse 替换掉换行的代码进行修改（下面的代码在 wxDiscode.js 文件的 strMoreDiscode 函数中）：

经过上面的修改，在进行替换时，会将“\n”替换掉而“\r\n”并不会，这样就保留了代码段中的换行。

3、HTML 转义字符

在之前的文章中说到了如何解决文章中“”和“&”字符的显示问题，这里我用的方法还是那个，先将 wxDiscode.js 中的

注释掉，然后在 中的 函数中添加这三个字符的替换：

4、/* */注释不显示问题

如果文章内容中含有“/* */” 的注释，wxParse 在解析时会替换掉，解决的办法就是在 中注释掉这个替换语句：

即上面代码的第6行。

5、代码段注释的背景色问题

在代码高亮了后，注释部分的背景色有点问题，在查看了元素的属性后发现是 中有一个 ：

原来这个样式是为了显示评论的，但是代码高亮后的注释也是用的这个 class，就导致了冲突。解决办法就会注释掉上面的“ ”。

基本上没啥别的小问题了，接下来就是开始处理代码高亮的部分了。

二、代码高亮1、Prism

首先要去 Prism 的官网下载相应的 js 和 css 文件，可以根据自己的需要来选择支持的代码语言和代码高亮的样式（Plugins 可以不选），官网下载页面点这里（https://prismjs.com/download.html）。

将下载下来的 prism.js 和 prism.css（重命名为 prism.wxss）添加到小程序的代码路径下，添加到哪里都行，只要在相应的文件中正确引用就行。我这里以添加到“/utils/prism.wxss” 和 “/utils/prism.js” 为例，如果你添加的路径和我的不同，下面代码中关于这两个的路径一定记得做更改！

对了，还有就是 中要做一些更改，把“pre”换成“.wxParse-pre”或者“.pure-highlightjs”，注意，后者是适合我的代码段结构的，建议自定义。

2、添加 highlight.js

这个 就是处理代码段高亮的核心部分了。当然一些代码是参考“richText”的解析来写的。将下面的代码直接复制为“ ”并添加到小程序的“/wxParse/highlight.js”。内容含有过多的注释，如不需要可以在添加时删去。

为什么写这么多注释呢？毕竟这个代码只在我的代码段结构下测试通过的，建议大家在移植的时候如果有问题能够修改该代码。

3、添加相关引用

在添加了 后，就要在 中引用并调用该文件。

首先在 开头引用 ：

然后在 函数中调用：

这里要注意的是，在调用 函数后再调用 函数！

接着是样式表的引用，在 的开头部分引用 ：

三、高亮效果

差不多就这样吧，有啥问题我会再补充，预览截图：

小程序代码高亮预览