程序員技術之旅網站/小程序/公眾號進入小程序

功能展示

引入Parser

微信小程序中引入Parser可直接在GitHub項目主頁(https://github.com/jin-yufeng/Parser)查閱。

代碼高亮

高亮插件

Prism官網下載prism.js和prism.css，默認只有css代碼有渲染樣式，注意選擇需要渲染的語言。

小程序所用樣式下載路徑

https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+csharp+cpp+dart+erlang+git+go+graphql+http+hpkp+hsts+ini+java+javadoc+javadoclike+javastacktrace+json+kotlin+lua+makefile+markup-templating+nginx+objectivec+php+phpdoc+php-extras+properties+python+rust+sql+swift+yaml

添加代碼

Parser-libs-MpHtmlParser.js的parse函數中if (config.highlight)判斷分支下，修改正則匹配。

因為本人的后端程序處理代碼塊在

code here中，所以正則匹配并提取文章中的代碼。

• $1是

• $2是代碼整體內容

• config.highlight是真正的高亮函數

this.data = this.data.replace(/([\s\S]*?)/g, function($, $1, $2) {
return " + $1 + '>' + config.highlight($2, " + $1 + '>') + "";
})

Parser-libs-config.js中添加highlight高亮函數，并且把函數導出。

Parser默認使用js語法來高亮代碼，這里稍作修改，對傳入的提取出對應語言。

備注：因為后端對提交的文章內容進行了防注入，轉換了<>&等符號，所以在高亮時轉換回正常符號。

const Prism = require('../../utils/prism.js');
var highlight = function (content, attrs) {
content = content.replace(/>/g, ');
content = content.replace(/, '>');
content = content.replace(/&/g, '&');//提取出對應語言var m = attrs.match(/"languages?-(.*)"/i);var lang = m ? m[1] : 'js'return Prism.highlight(content, Prism.languages[lang], lang)
}module.exports = {// 高亮處理函數
highlight: highlight
...
}

長按復制

代碼高亮功能已經是Parser提供的功能了，只是在此基礎上修改了符合自己需求的代碼。

長按復制功能是考慮到代碼段較多，代碼展示的區域又是可以滑動的，Parser提供的selectable選項需要手動拖動選擇，出于此考慮做了一個增進。

1. MpHtmlParser構造函數：自定義一個數組接收代碼內容。

//MpHtmlParser構造函數constructor(data, options = {}, cb) {
...
this._parserCodeContent = [];
}

2. MpHtmlParser的parse函數：代碼高亮匹配處保存代碼至自定義數組中。

// 代碼高亮匹配if (config.highlight) {var that = this //注意用that接收this.data = this.data.replace(/

([\s\S]*?)/g, function($, $1, $2) {
that._parserCodeContent.push($2)return " + $1 + '>' + config.highlight($2, " + $1 + '>') + "";
})
}

3. MpHtmlParser的popNode函數：添加是否是pre標簽，如果是則在node上添加一個content屬性。

// 節點出棧處理
popNode(node) {
...//處理代碼長按if (node.name == 'pre') {
node.content = this._parserCodeContent.shift();
}
...
}

4. trees.wxml中添加pre標簽，并且增加data-content等于從上一步node上添加的content屬性，和bindlongpress="longPressEvent"長按事件綁定。

<rich-text wx:if="{{item.name=='pre'}}" data-content="{{item.content}}" id="{{item.attrs.id}}" class="__{{item.name}}" style="{{Handler.getStyle(item.attrs.style,'block')}}" nodes="{{Handler.setStyle(item)}}" bindlongpress="longPressEvent" />

5. tree.js的methods函數中添加：長按復制具體實現。

longPressEvent: function (e) {var content = e.currentTarget.dataset.content;
wx.showActionSheet({itemList: ['復制代碼'],
success(res) {var tabIndex = res.tapIndex;if (tabIndex == 0) {
wx.setClipboardData({data: content,
success(res) {
wx.showToast({title: '代碼已復制'
})
}
})
}
}
})
}

大功告成。

——? ? 感謝閱讀? ? ——

..................

程序員技術之旅

..................

搬磚達人

網站/小程序/公眾號

CV工程師

技術分享/記錄奇葩問題

偽全棧

Java/Android/Python

........................................................................

您在看嗎？

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的代码雨代码源复制_小程序基于Parser添加长按复制、代码高亮等功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。