效果
引入第三方包
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
创建js文件用于配置公式
let isMathjaxConfig = false;//用于标识是否配置
// window.MathJax = MathJax;
const initMathjaxConfig = () => {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Config({
showProcessingMessages: false, //关闭js加载过程信息
messageStyle: "none", //不显示信息
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
},
"HTML-CSS": {
availableFonts: ["STIX", "TeX"], //可选字体
showMathMenu: false, //关闭右击菜单显示
},
});
isMathjaxConfig = true; //配置完成,改为true
};
const MathQueue = function (elementId) {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue,
}
vue组件
<template>
<div>
<div class="mathJaxFont" v-html="formula"></div>
</div>
</template>
<script>
import MathJax from '../utils/MathJax';
export default {
data() {
return {
formula:"$$R_{再生水}=\\sum_{j=1}^{n}(Q_{j再生水}-Q_{j再生水上年})\\times C_{ji当年}\\times10^{-2}$$",
};
},
created() {
this.formatMath();
},
methods: {
formatMath() {
let that = this;
setTimeout(function () {
that.$nextTick(function () {
if (MathJax.isMathjaxConfig) {//判断是否初始配置,若无则配置。
MathJax.initMathjaxConfig();
}
MathJax.MathQueue("hello");//传入组件id,让组件被MathJax渲染
})
}, 200);
},
},
mounted() {
}
}
</script>
<style scoped lang="less">
.mathJaxFont {
font-size: 18px;
margin: 16px;
width: max-content;
/deep/ .MJXc-display {
text-align: left !important;
}
}
</style>