小程序界面篇——實現代碼高亮

小程序實現代碼高亮

擁有小程序開發經歷的人大多知道小程序不支持直接插入dom，那麼當我們獲取到markdown數據需要渲染的時候就有麻煩。對於富文本的解析我們會使用WxParse插件，那麼markdown數據如何渲染呢？towxml插件。

PS：下一篇文章講解小程序實現手指左右滑動切換頁面。

towxml介紹

Towxml插件的作用？Towxml 是一個可將HTML、markdown轉換為WXML(WeiXin Markup Language)的渲染庫。

通過Towxml我們可以做什麼？

支持代碼語法高亮

支持emoji表情wink

支持上標、下標、下劃線、刪除線、表格、視頻、圖片（幾乎所有html元素）……

支持typographer字元替換

多主題動態支持

極致的中文排版優化

下載地址：https://github.com/sbfkcel/towxml。

如何使用：在github中有demo,可以看一下如何引用，或者繼續往下看。

目錄結構：

tomxml的問題

先看一下效果圖，再說問題。

問題：

一.在下載插件之後，我研究了一下上面的demo,發現好像富文本中的代碼並不能高亮，MarkDown數據才可以高亮。

二.在插件的Demo中，其訪問的MarkDown數據格式如下：

所以在後台編輯相應的文本展示到前台的時候，我們需要按照markdown的格式來進行編輯。

三.其中main.js在運行過程中，會報錯：因為在index.js中引入的js是不存在的，下圖注釋部分，也就是這些類型的數據無法渲染，缺少相應的庫。

tomxml的使用

首先將womxml放到項目的一級目錄：

然後在app.js中引入：

這裡面的getText是對小程序中請求的一次封裝，不過本人喜歡這樣封裝形式（自己封裝的）：

然後在展示頁面的js中進行請求：

最後頁面渲染：

效果：

大功告成。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！