uni-app-在微信小程序中实现markdown文本解析展示

前言

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

下面来介绍下，在开发微信小程序软件聚导航AI助手对实现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).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 下面的文件为相对路径，修改后如下图。

在pages.json，所需要用到towxml的页面添加如下代码：

"usingComponents": {
    "towxml": "/wxcomponents/towxml/towxml"
}

如图：

在main.js 引入，并挂载到原型中，如下图。

在页面中进行使用

<towxml v-else :nodes="$towxmlFun('传入需要解析的Markdown文本', 'markdown')" />

如下图：

效果展示：