場景
數(shù)據(jù)庫中有markdown語法的字符串，需要展示為正常的頁面，難點(diǎn)在于其中的katex數(shù)學(xué)公式
解決方式
使用showdown及其族系插件
npm i showdown
npm i showdown-katex文章來源：http://www.zghlxwxcb.cn/news/detail-434950.html
<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({
// 詳細(xì)配置見：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
// 詳細(xì)配置見：https://katex.org/docs/options.html
throwOnError: false, // 公式有錯(cuò)時(shí)，是否拋出錯(cuò)誤
displayMode: false, // 如果為false，公式以inline方式渲染
delimiters: [
{ left: "$$", right: "$$", display: false },
{ left: "$", right: "$", display: false },
{ left: "~", right: "~", display: false, asciimath: true },
],
}),
],
});
return converter.makeHtml(msgInfo);
}
}
}
</script>
一些奇奇怪怪和解決方法
如果公式中有開根號，那么這個(gè)公式會出現(xiàn)兩次。第一次是正常根號展示，第二次是根號內(nèi)公式和一個(gè)無限長的根號。解決方法是用樣式把第二次的展示消除掉：文章來源地址http://www.zghlxwxcb.cn/news/detail-434950.html
.katex-html {
display: none;
}
到了這里，關(guān)于vue頁面中展示markdown以及katex公式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
