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

基于 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(/[ ]+

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

扫描下方二维码或搜索微信号:WPGeek 关注微信公众号 WordPress ,回复:wxParse 即可获取下载地址及密码

微信公众号 WordPress

1 条评论

  1. 很好!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

基于 wxParse 实现 WordPress 版小程序代码高亮
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close