vue页面中展示markdown以及katex公式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>