关于前端:uniapp中解析markdown支持网页和小程序

对于 markdown 置信大家都不生疏，日常写文档或日常记录都用到的比拟多，书写的是 markdown 的格局，实时预览的是转换后的 html 款式。本次实现的需要是在 uniapp 中转换 markdown 文本展现在不同的平台，次要平台是浏览器应用和微信小程序应用。

对于这两个平台目前没有一个比拟通用的解决方案，本次实现也是针对不同的平台独自实现，以下就是具体的实现过程。

浏览器实现

浏览器实现次要基于 marked，因为文本中会存在对代码的转换，所以还须要减少highlight.js 解决代码高亮的状况。另外为了保障 HTML 的安全性，减少了 DOMPurify 库过滤 HTML，DOMPurify可过滤不可信 HTML 和爱护应用程序免受歹意用户输出来帮忙避免跨站脚本攻打（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,
    xhtml: false
});

而后即可对原始 markdown 文本进行 html 转换和平安过滤：

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

转换之后的数据在 html 中渲染展现：

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

到此浏览器端实现就实现了，根本实现流程绝对比较简单。默认引入的款式不肯定满足需要，可通过笼罩款式重写，这个在小程序端也是同理。

微信小程序实现

微信小程序外面实现较为简单一些，次要是基于 Towxml 3.0 实现。首先须要克隆我的项目到本地或间接到我的项目地址下载压缩包。

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

装置依赖后在本地执行 build 编译代码

npm install
npm run build

新构建进去的文件在 dist 目录下，把构建好的文件夹 dist 改名为 towxml，在uni-app 我的项目根目录中新建 wxcomponents 目录，将 towxml 复制进去即可。

towxml/decode.json中默认引入的组件依赖有些是用不上的，能够依据理论的状况进行删改。

{
  "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"}
}

因为本次需要中会在多个页面中应用，曾经将 markdown 抽离到公共组件。所以将其配置到全局 globalStyle 中：

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

在 html 中应用 towxml 组件

<towxml :nodes="html" />

在 JS 中 markdown 转换赋值：

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

到此根本的转换性能就实现实现了，因为小程序端和浏览器端是通过不同的实现形式，导致对应展现的 UI 也有所区别，小程序端的 UI 重写能够批改 wxcomponents / towxml / style / theme 中的款式文件即可。

上线成果预览：

最初

本文介绍了如何在 uni-app 框架中解析Markdown，并且反对在网页和小程序端展现。在小程序端的实现过程还是踩了不少坑，浏览器端实现绝对简略也比拟成熟，有趣味的能够本人尝试看看。

看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）