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

2018年10月6日 3042点热度 1人点赞 7条评论

基于 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

WPTalk

这个人很懒,什么都没留下

文章评论

  • Mr.A

    很好!

    2018年10月19日
  • Chi

    回复评论测试

    2018年12月15日
  • Bruno Bai

    可以替换掉守望轩里面的wxparse包就可以了吧?

    2019年1月28日
    • Chi

      @Bruno Bai 除了替换改造好的 wxParse ,还需要在文本解析前转换替换的语言格式

      2019年1月28日
      • Bruno Bai

        @Chi 不是很明白额,可以加个微信说吗?我的微信18810514485

        2019年1月28日
        • Chi

          @Bruno Bai 即替换 wxParse 后,还需要把详情页的 wxParse.wxParse() 这一部分的内容换成教程中第一步的第4点。

          2019年1月28日
  • Weyooz

    码住

    2020年6月30日
  • 您需要 登录 之后才可以评论