在index.html中引入
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
新建一个golbalVariable.js
// 新建一个golbalVariable.js
let isMathjaxConfig = false;//用于标识是否配置
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"] //避开某些标签
},
"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)]);//这里可以用原生的js调用name,class,id。
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue
}
在main.js全局引入
// main.js
import globalVariable from '@/assets/js/globalVariable'
Vue.prototype.commonsVariable = globalVariable
.vue页面使用
<div>{{math}}</div>
data(){
return{
math:'`N=(LBh_1q_1)/1000`'
}
}
mounted() {
this.$nextTick(function() { // 这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
if (this.commonsVariable.isMathjaxConfig) { // 判断是否初始配置，若无则配置。
this.commonsVariable.initMathjaxConfig()
}
this.commonsVariable.MathQueue('container-table')// 传入组件id，让组件被MathJax渲染
})
},
效果图
