正文

對于markdown相信大家都不陌生，日常寫文檔或日常記錄都用到的比較多，書寫的是markdown的格式，實時預(yù)覽的是轉(zhuǎn)換后的html樣式。本次實現(xiàn)的需求是在uniapp中轉(zhuǎn)換markdown文本展示在不同的平臺，主要平臺是瀏覽器使用和微信小程序使用。

對于這兩個平臺目前沒有一個比較通用的解決方案，本次實現(xiàn)也是針對不同的平臺單獨實現(xiàn)，以下就是具體的實現(xiàn)過程。

瀏覽器實現(xiàn)

瀏覽器實現(xiàn)主要基于marked，由于文本中會存在對代碼的轉(zhuǎn)換，所以還需要增加highlight.js處理代碼高亮的情況。另外為了保障HTML的安全性，增加了DOMPurify庫過濾HTML，DOMPurify可過濾不可信HTML和保護應(yīng)用程序免受惡意用戶輸入來幫助防止跨站腳本攻擊（XSS攻擊）。

核心依賴包安裝如下：

npm install marked --save
npm install dompurify --save
npm install highlight.js --save

核心依賴包引用如下：

import { marked } from 'marked';
import DOMPurify from 'dompurify';
import hljs from "highlight.js/lib/common";
// 代碼主體樣式文件
import 'highlight.js/styles/github.css';

marked使用前先進行初始配置初始化：

marked.setOptions({
    renderer: new marked.Renderer(),
    highlight: function(code) {
        return hljs.highlightAuto(code).value;
    },
    pedantic: false,
    gfm: true,
    tables: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    js: false
});

然后即可對原始markdown文本進行html轉(zhuǎn)換和安全過濾：

this.html = DOMPurify.sanitize(marked.parse(text));

轉(zhuǎn)換之后的數(shù)據(jù)在html中渲染展示：

<div v-html="parseHtml"></div>

到此瀏覽器端實現(xiàn)就完成了，基本實現(xiàn)流程相對比較簡單。默認引入的樣式不一定滿足需求，可通過覆蓋樣式重寫，這個在小程序端也是同理。

微信小程序?qū)崿F(xiàn)

微信小程序里面實現(xiàn)較為復(fù)雜一些，主要是基于Towxml 3.0實現(xiàn)。首先需要克隆項目到本地或直接到項目地址下載壓縮包。

git clone https://github.com/sbfkcel/towxml.git

安裝依賴后在本地執(zhí)行build編譯代碼

npm install
npm run build

新構(gòu)建出來的文件在dist目錄下，把構(gòu)建好的文件夾dist改名為towxml，在uni-app項目根目錄中新建wxcomponents目錄，將towxml復(fù)制進去即可。

towxml/decode.json中默認引入的組件依賴有些是用不上的，可以根據(jù)實際的情況進行刪改。

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "echarts": "./echarts/echarts",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

下一步需要在需要使用的頁面pages.json中添加組件配置，引入towxml組件。

{
  "path": "pages/page/page",
  "style": {
  "usingComponents": {
      "towxml": "/wxcomponents/towxml/towxml"
  }
}

由于本次需求中會在多個頁面中使用，已經(jīng)將markdown抽離到公共組件。所以將其配置到全局globalStyle中：

"globalStyle": {
    // #ifdef MP-WEIXIN
    "usingComponents": {
        "towxml": "/wxcomponents/towxml/towxml",
        "decode": "/wxcomponents/towxml/decode"
    },
    // #endif
}

在html中使用towxml組件

<towxml :nodes="html" />

在JS中markdown轉(zhuǎn)換賦值：

import towxml from "../wxcomponents/towxml/index.js"
this.html = towxml(text, 'markdown')

到此基本的轉(zhuǎn)換功能就實現(xiàn)完成了，由于小程序端和瀏覽器端是通過不同的實現(xiàn)方式，導(dǎo)致對應(yīng)展示的UI也有所區(qū)別，小程序端的UI重寫可以修改 wxcomponents / towxml / style / theme 中的樣式文件即可。

上線效果預(yù)覽：

最后

本文介紹了如何在uni-app框架中解析Markdown，并且支持在網(wǎng)頁和小程序端展示。在小程序端的實現(xiàn)過程還是踩了不少坑，瀏覽器端實現(xiàn)相對簡單也比較成熟，有興趣的可以自己嘗試看看。

更多關(guān)于uniapp解析markdown的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論