项目背景

uni-app小程序插件：zero-markdown-view(markdown解析)

预览、下载地址：ext.dcloud.net.cn/plugin?id=9…

之前使用uniapp做个博客类的小程序，自然需要用到markdown解析。下面说说开发过程。不过既然文章标题优化，肯定有前后对比，先说说第一个版本的。

v1.0

分析需求，面向百度编程，ok，找到一个 mp-html 的插件。
快速浏览一遍插件说明，用起来不难，懂了一半，继续百度一下有没有大佬的使用案例对照一下，嗯~，先这样，再这样，完美。

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>

其实就是先引入 mp-html，然后用 marked 把接口返回的md格式字符串转成 html，最后用 highlight.js 对文中的代码块进行美化。
基于能跑就行的原则，就这么干了。

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\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>

运行效果。文章开头有插件地址，传送门。

很遗憾，小程序的规则原因，我不得不把文章功能撤掉，然后把之前写的markdown简单封装一下成为插件，在我的想法里面，虽然文章不能上，但后面应该能用上的。但也正因为这个插件，随着小程序的功能增加，代码包的体积也上来了。

逃不过看书的命运，再去翻翻插件的文档， mp-html 提供插件支持，从npm下载的插件包目录结构可以看到插件都有了。那就开始 v2.0 吧

v2.0

下载 mp-html 完整的代码包

npm install mp-html

找到 tools/confing.js , 把我们需要的插件注释打开

cd 到 node_modules/mp-html 目录下，执行命令

npm install

npm run build:uni-app

可以看到 dist/uniapp 目录下有我们需要的代码包了，把里面的 mp-html 文件夹复制出来，放到自己项目的里

直接使用即可

<template>
	<view class="mark-content">
		<mp-html :key="mpkey" :selectable="selectable" class="zero-view" :tag-style="tagStyle" :markdown="true" :content="html">
		</mp-html>
	</view>
</template>

看看效果，表格好看点，脚注没有了高亮，问题不大，基本用不上，有需要再研究。

最后，别忘了目的是什么，体积！！

后来，这个插件的并没有随着文章功能的下架而荒废，最后他在刷面试题功能上又发光发热了。

总结

每个人都有自己的开发习惯，没有绝对的对错，所以有了能跑就行，但是做人总要有点追求，更好的解题方式，更优的写法等等。
总之，基于自己的价值观衡量，所花的时间，制定的目标，达到的效果。自己的项目，达到自己的目标就行了，工作的项目，满足需求的情况下，最好能有良好的扩展性，可维护性等等。
最重要的还是，用别人造的轮子，就得多看文档！！！

记一次uniapp插件：zero-markdown-view优化过程

项目背景

v1.0

v2.0

总结