场景
解决方式
使用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;
}