在index.html中引入
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
创建一个MathJax.js文件,跟main.js同级
let isMathjaxConfig = false;
const initMathjaxConfig = () => {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Config({
showProcessingMessages: false,
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;
};
const MathQueue = function(elementId) {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue,
}
在main.js中注册
import MathJax from './MathJax'
Vue.prototype.MathJax = MathJax;
在页面中使用
created() {
this.formatMath()
},
methods:{
formatMath() {
setTimeout(() => {
this.$nextTick(() => {
if (this.MathJax.isMathjaxConfig) {
this.MathJax.initMathjaxConfig();
}
this.MathJax.MathQueue('mytinyEdit');
})
}, 500)
},
},
watch:{
stemValue(newValue) {
this.$nextTick(function () {
if (this.MathJax.isMathjaxConfig) {
this.MathJax.initMathjaxConfig()
}
this.MathJax.MathQueue('mytinyEdit')
})
},
}