vue页面中展示markdown以及katex公式

场景

数据库中有markdown语法的字符串，需要展示为正常的页面，难点在于其中的katex数学公式

解决方式

使用showdown及其族系插件

npm i showdown

npm i showdown-katex

<template>
	<div class="msg" v-html="transformMsg(msgInfo)"></div>
</template>
<script>
import showdown from "showdown";
import showdownKatex from "showdown-katex";
  
export default {
  data() {
    return {
      msgInfo: ""  // markdown语法的字符串
    }
  },
  methods: {
    transformMsg(msgInfo = "") {
      msgInfo = msgInfo.replaceAll("<br  />", "\n");  // 一些处理
      let converter = new showdown.Converter({
        // 详细配置见：https://github.com/showdownjs/showdown#valid-options
        tables: true,  // 支持table语法
        strikethrough: true,  // 将~~strikethrough~~ 识别为 <del>strikethrough</del>
        underline: true,  // __test__中的下划线不识别为<em> 和 <strong>
        extensions: [
          showdownKatex({
            // 使用方式见：https://obedm503.github.io/showdown-katex
            // 详细配置见：https://katex.org/docs/options.html
            throwOnError: false,  // 公式有错时，是否抛出错误
            displayMode: false,  // 如果为false，公式以inline方式渲染
            delimiters: [
              { left: "$$", right: "$$", display: false },
              { left: "$", right: "$", display: false },
              { left: "~", right: "~", display: false, asciimath: true },
            ],
          }),
        ],
      });
      return converter.makeHtml(msgInfo);
    }
  }
}
</script>

一些奇奇怪怪和解决方法

如果公式中有开根号，那么这个公式会出现两次。第一次是正常根号展示，第二次是根号内公式和一个无限长的根号。解决方法是用样式把第二次的展示消除掉：

.katex-html {
  display: none;
}