最近需求用到Markdown渲染 记录一下
效果
小程序
H5
github-markdown-css 这个 css 会根据系统外观匹配
H5 渲染
样式 github-markdown-css
解析 marked
npm 或 yarn 都可以
页面
<view v-html="content" />
js
import { marked } from 'marked';
import 'github-markdown-css';
const content.value = await marked(html);
小程序渲染
towxml官网:towxml
1.先将towxml克隆到本地
2. 找到打包好的dist文件改名字 towxml -> 放到uniapp项目根目录wxcomponents文件夹中。 wxcomponents文件夹和App.vue同级目录
3.修改towxml文件夹下的 decode.json 路径 “./”
4.修改towxml文件夹下的 index.js -> 导出方式改成es6 具名导出,方便使用
5.哪个页面使用组件需在page.json文件对应页面style属性中声明
6.使用
<towxml :nodes="content" />
js
import {useTowxml} from '@/wxcomponents/towxml/index.js';
const content.value = useTowxml(这里传数据, 'markdown');
谢谢观看, 下次再见!