前言
在做AI问答功能，文本返回的是markdown形式，如果没有对Markdown文本进行转换很难看，如下图，转换后是不是很好了很多，特别是代码内容阅读起来舒服多了。
下面来介绍下，我在开发小程序软件聚导航AI助手对实现Markdown文本解析，看到两款较好的组件，其中第二款towxml组件已应用到项目中。
遇到的坑
mp-html + Markdown 组合方式，理论支持多端，包括h5、小程序、App，但并没有使用这个，而是使用了towxml组件，因为，在使用mp-html + Markdown时，小程序调试时很正常，但发送到真机调试却爆出了一些莫名其妙的错误，尝试了一番，也无法解决，最后使用towxml。
教程开始
1. 使用 npm 下载 mp-html 插件
官方文档： https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart
npm install mp-html使用方式
<template><view><mp-html :content="html" /></view>
</template>
<script>
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
export default {
// 不可省略components: {
mpHtml,
},
data() {
return {
html: "<div>Hello World!</div>",
};
},
};
</script>2. 使用 npm 下载 marked 插件和 highlight 插件
marked 插件可以和 highlight 插件共用，实现 markdown 中代码块的高亮效果
marked.js 官方文档：https://marked.js.org/
highlight.js 官方文档：https://fenxianglu.cn/highlight.html
npm install marked
npm install highlight.js
完整代码
<template><view><mp-html :content="html" /></view>
</template>
<script>
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
import { marked } from "marked";
import hljs from "highlight.js";
import "highlight.js/scss/atom-one-dark.scss";
export default {
// 不可省略components: {
mpHtml,
},
data() {
return {
html: "<div>Hello World!</div>",
markdown: "```javascript
function(){
console.log(123)
}
```",
};
},
mounted() {
this.initHighLight();
this.html = marked(this.markdown);
// 下面代码是解决代码高亮无效问题// this.html = marked(this.markdown).replace(/<pre>/g, "<pre class='hljs'>");
},
methods: {
initHighLight() {
hljs.configure({
useBR: true,
tabReplace: " ",
});
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
highlight: function (code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.highlightAuto(code).value;
}
},
});
},
},
};
</script>第二种
towxml：实现markDown转XML，这种只支持微信小程序，H5无法使用
Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。
1、克隆项目到本地或直接到项目地址下载压缩包
git clone https://github.com/sbfkcel/towxml.git2、使用cmd安装构建依赖
npm install 或 yarn install3、运行 npm run build 或 yarn run build，目录下看到dist。
把dist这个文件复制到你项目的根目录wxcomponents文件夹里面(如果没有这个文件夹，自己新建一个即可)，并命名为towxml。
然后进入towxml，修改decode.js 里面usingComponents 下面的文件为相对路径，修改后如下图。别忘了，这步骤很重要！这步骤很重要！这步骤很重要！
还有一个大坑，如果你使用uniapp easycom自动引入Uview的代码，记得排除 u-shadow-root 组件，因为这个组件名称是towxml的里面的，如果没有排除，会从uview匹配u-shadow-root 组件，提示找不到不到组件的错误：
"easycom": {
"autoscan": true,
"custom": {
// "^uni-(.*)": "@/uview-ui/components/u-$1/u-$1.vue", // 自动匹配 u- 开头的组件
"^uni-(?!shadow-root)(.*)": "@/uview-ui/components/u-$1/u-$1.vue" // 排除u-shadow-root 组件被防止引入报错
}
}在pages.json，所需要用到towxml的页面添加如下代码：
"usingComponents": {
"towxml": "/wxcomponents/towxml/towxml"
}如图：
在main.js 引入，并挂载到原型中，如下图。
在页面中进行使用，主题theme对象，可以不写，两种可选（dark/light），默认light
<towxml v-else :nodes="$towxmlFun('传入需要解析的Markdown文本', 'markdown',{theme: 'dark'})" />如下图：
效果展示：
本以为万事大吉了，谁料到遇到公式的文本时，竟然无法解析数学公式，如下图：
toxwml虽然提供有数学公式解析，yuml图解析的功能，但是，需要使用者搭建公式解析服务API才能使用😅，其实就是自己搭建接口，然后通过接口把这些公式提交的服务端处理后，再返回给前端渲染：
// LaTex公式、yuml 解析服务架设参见： https://github.com/sbfkcel/markdown-server
这解析项目使用的是node开发的，所以还需在后端部署node环境，然后运行项目，把你的接口替换即可：
现在数学公式，终于可以正常解析了，看起来真的舒服，丝滑文章来源：https://www.toymoban.com/news/detail-768445.html
文章来源地址https://www.toymoban.com/news/detail-768445.html
到了这里，关于uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
