uniapp+Vite+V3 setup Markdown H5和towxml微信小程序渲染

最近需求用到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');

谢谢观看， 下次再见！