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

掃描下方二維碼或搜索微信號:GitHubMiniProgram 關注微信公眾號 GitHub好物薦 ,回復:wxParse 即可獲取下載地址及密碼

微信公眾號 GitHub好物薦

相關推薦

6 條評論

  1. 很好!

  2. Chi

    回復評論測試

  3. Bruno Bai

    可以替換掉守望軒里面的wxparse包就可以了吧?

    • Chi

      除了替換改造好的 wxParse ,還需要在文本解析前轉換替換的語言格式

      • Bruno Bai

        不是很明白額,可以加個微信說嗎?我的微信18810514485

        • Chi

          即替換 wxParse 后,還需要把詳情頁的 wxParse.wxParse() 這一部分的內容換成教程中第一步的第4點。

發表評論

微信掃一掃

微信掃一掃

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

基于 wxParse 實現 WordPress 版小程序代碼高亮
返回頂部

顯示

忘記密碼?

顯示

顯示

獲取驗證碼

Close
七星彩走势图500