uniapp vue3 微信小程序展示markdown

最近在做结合大模型的微信小程序智能对话问答，由于大模型返回的是一些markdown语法，所以就想着找找目前已有的可用的插件，测试了主流的几款插件效果，特此记录。

一、zero-markdown-view

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

<zero-markdown-view :markdown="sparkResult" themeColor="#000000"></zero-markdown-view>

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

二、微信小程序原生插件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，将里面的前缀改为相对路径./，修改后如下

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

2、main.js全局挂载

const towxml = require('./wxcomponents/towxml/index');
export function createApp() {
  const app = createSSRApp(App);
  app.config.globalProperties.$towxml = towxml
  return {
    app,
  };
}

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

{
			"path": "pages/index/messageIndex",
			"style": {
				"navigationStyle": "custom",
				 "usingComponents": {
				   "towxml": "/wxcomponents/towxml/towxml"
				  }
			}
		},

4、页面使用

<towxml :nodes="testData"/>



import { reactive, ref, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const appContext = instance?.appContext
const testData = appContext?.config.globalProperties.$towxml('``111``', 'markdown')

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

// towxml/style/main.scss 
.h2w__main { margin: 0; padding-top: 0; }

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

效果如下: