场景
数据库中有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;
}
