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\nfunction(){\n\tconsole.log(123)\n}\n```",
    };
  },
  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>