uniapp - 微信小程序 开发 markdown文本解析遇到的哪些坑和使用实现方法，真的超细

微信公众号软件聚导航
1,465 阅读3分钟

前言

在做AI问答功能，文本返回的是markdown形式，如果没有对Markdown文本进行转换很难看，如下图，转换后是不是很好了很多，特别是代码内容阅读起来舒服多了。

下面来介绍下，我在开发小程序软件聚导航AI助手对实现Markdown文本解析，看到两款较好的组件，其中第二款towxml组件已应用到项目中。

遇到的坑

mp-html + Markdown 组合方式，理论支持多端，包括h5、小程序、App，但并没有使用这个，而是使用了towxml组件，因为，在使用mp-html + Markdown时，小程序调试时很正常，但发送到真机调试却爆出了一些莫名其妙的错误，尝试了一番，也无法解决，最后使用towxml。

教程开始

1. 使用 npm 下载 mp-html 插件

官方文档： jin-yufeng.gitee.io/mp-html/#/o…

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 官方文档：marked.js.org/

highlight.js 官方文档：fenxianglu.cn/highlight.h…

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.git

2、使用cmd安装构建依赖

npm install 或 yarn install

3、运行 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 解析服务架设参见： github.com/sbfkcel/mar…

这解析项目使用的是node开发的，所以还需在后端部署node环境，然后运行项目，把你的接口替换即可：

现在数学公式，终于可以正常解析了，看起来真的舒服，丝滑

avatar
文章
阅读
粉丝