一、zero-markdown-view

首先是去dcolud插件市场逛 了一圈，发现兼容vue3并且下载数比较高的是这款，zero-markdown-view，ext.dcloud.net.cn/plugin?id=9… 插件用起来比较方便，符合easycom组件模式, 导入 uni_modules 后直接使用即可。 参数支持自定义代码背景色（不建议修改）、以及主题色。 测试效果如下：

复制 1<zero-markdown-view :markdown="sparkResult" themeColor="#000000"></zero-markdown-view>
 2

个人觉得主段落内容字号太大，行距太大，看起来不是很美观。

二、微信小程序原生插件tom

1、安装 第一步：下载源文件，那么可以git clone，也可以直接下载压缩包 git clone github.com/sbfkcel/tow…

第二步：设置文件夹内的config.js，可以选择自己需要的格式

第三步：安装依赖和打包 npm i npm run build 打包完成后会生成一个dist文件夹，改名字为towxml

第四步：在uniapp项目的src目录下新建wxcomponents目录（需要注意的是这个文件名是有要求的），然后将towxml放到wxcomponents下

第五步：修改towxml里的decode.json，将里面的前缀改为相对路径./，修改后如下

复制 1  "component": true,
 2  "usingComponents": {
 3    "decode": "./decode",
 4    "audio-player": "./audio-player/audio-player",
 5    "echarts": "./echarts/echarts",
 6    "latex": "./latex/latex",
 7    "table": "./table/table",
 8    "todogroup": "./todogroup/todogroup",
 9    "yuml": "./yuml/yuml",
10    "img": "./img/img"
11  }
12}

2、main.js全局挂载

复制 1const towxml = require('./wxcomponents/towxml/index')
 2export function createApp() {
 3  const app = createSSRApp(App)
 4  app.config.globalProperties.$towxml = towxml
 5  return {
 6    app,
 7  }
 8}

3、在pages.json里需要的页面的style属性里使用组件

复制 1{
 2            "path": "pages/index/messageIndex",
 3            "style": {
 4                "navigationStyle": "custom",
 5                 "usingComponents": {
 6                   "towxml": "/wxcomponents/towxml/towxml"
 7                  }
 8            }
 9        },

4、页面使用

复制 1<towxml :nodes="testData"/>
 2
 3
 4
 5import { reactive, ref, getCurrentInstance } from 'vue'
 6
 7const instance = getCurrentInstance()
 8const appContext = instance?.appContext
 9const testData = appContext?.config.globalProperties.$towxml('``111``', 'markdown')
10

5、由于该组件默认带有边距，所以需要在towxml/style/main.scss里进行手动修改，代码如下：

复制 1// towxml/style/main.scss 
 2.h2w__main { margin: 0; padding-top: 0; }
 3

在组件里使用class和! important是无效的。

效果如下: