基于 wxParse 实现 WordPress 版小程序代码高亮

更新时间：2020-05-18 分类：小程序 浏览量：4615

基于 wxParse 实现 WordPress 版小程序代码高亮

很早之前就想动手给 WordPress 版微信小程序实现代码高亮，但是一直没有找到的解决方案。看到相关的组件，比如 towxml、richText 和 html2json ，但是一直习惯于 wxParse ，所以并不想更换使用，首先的是 wxParse 解决方案，最后还真给找到了教程，现在分享给大家。教程地址：点击这里（日出一点一）

如果有兴趣动手的朋友，可以根据原教程或下面我的步骤进行修改。如果不想动手的朋友，可以通过文章底部的传递门进行修改后的 wxParse 包进行更新。

第一步：修改 wxParse

1. 修改代码换行问题

wxParse 默认是替换掉所有的换行，包括“\n”和“\r\n”，因此，对 wxParse 替换掉换行的代码进行修改（下面的代码在 wxDiscode.js 文件的 strMoreDiscode 函数中）：


function strMoreDiscode(str){
    //str = str.replace(/\r\n/g,"");  
    str = str.replace(/([^\r])\n/g,'$1');

    //str = str.replace(/code/g,"wxxxcode-style");
    return str;
}

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

2. 修改 HTML 转义字符

先将 wxDiscode.js 中的


str = str.replace(/</g, '<');
str = str.replace(/>/g, '>');
str = str.replace(/&/g, '&');

注释掉，然后在 html2json.js 中的 transEmojiStr() 函数中添加这三个字符的替换：


function transEmojiStr(str){
  // var eReg = new RegExp("["+__reg+' '+"]");
  //修复 < > 的显示问题
  str = str.replace(/</g, '<');
  str = str.replace(/>/g, '>');
  str = str.replace(/&/g, '&');

3. /* */注释不显示问题

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

function trimHtml(html) {
  return html
        //.replace(/\n+/g, '')
        .replace(/ /ig, '')
        // 替换掉 /* */
        //.replace(/\/\*.*?\*\//ig, '')
        .replace(/[ ]+</ig, '<')
}

4. 修改获取文章内容数据

在获取文章内容函数方式里，把请求的数据内容替换标签，如：


//替换代码标签
var contents = response.data.content.rendered.replace(/<pre[^>]*><code class=\"([^\s]*)\">/g, "<pre class=\"pure-highlightjs $1\">").replace(/<\/code><\/pre>/g, "</pre>");

//替换标签后内容返回
WxParse.wxParse('article', 'html', contents, self, 5);

第二步，代码高亮插件

1. 获取 Prism 插件

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

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

对了，还有就是 prism.wxss 中要做一些更改，把“pre”换成“.wxParse-pre”或者“.pure-highlightjs”，注意，后者是适合我的代码段结构的，建议自定义。为什么呢？在 HTML 中，我们是用 “pre” 标签来标识代码，而在小程序中，经过 wxparse 的解析后，“pre” 变为了 “class=wxParse-pre”，即 “pre” 标签元素在解析后变为了 class=“wxParse-pre” 元素，所以 prism.css 中的选择器也要做相应的更改（元素选择变为 class 选择），例如：


/* 原来的 */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

修改为


/* 修改后的，也可以是 .wxParse-pre */
.wxParse-pre {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

2、添加 HIGHLIGHT.JS

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

HIGHLIGHT.JS

HIGHLIGHT.JS

HIGHLIGHT.JS

3、添加相关引用

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

首先在 html2json.js 开头引用 highlight.js ：

var highlight = require('./highlight.js'); // 注意路径

然后在 html2json() 函数中调用：


function html2json(html, bindName) {
    //处理字符串
    // console.log('1');
    html = removeDOCTYPE(html);
    html = trimHtml(html);
    html = wxDiscode.strDiscode(html);
    html = highlight.highlight(html);

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

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

@import "../../utils/prism.wxss"; // 注意路径

第三步，测试代码高亮

发布文章的时候，需要使用填写代码语言的 class 。比如


<pre class="pure-highlightjs"><code class="javascript">这里是 Javascript 代码</code></pre>

小程序截图

微信小程序代码高亮

获取修改版 wxParse

1.点击这里访问 WordPress 小程序资源站点获取网盘下载地址

2.扫描下方二维码或搜索微信号：WPGeek 关注微信公众号 WordPressTalk ，回复：wxParse 即可获取下载地址及密码

微信公众号 WordPressTalk

标签： , ,