html页面新增js <script src=”./js/mathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML”></script>
window.d.ts设置
interface Window {MathJax : any}
全局设置
import globalVariable from ‘./utils/globalVariable’;
Vue.prototype.$mathJax = globalVariable;
创建/utils/globalVariable文件
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", "code", "a"], //避开某些标签
},
"HTML-CSS": {
availableFonts: ["STIX", "TeX","AMS"], //可选字体
showMathMenu: false //关闭右击菜单显示
}
});
isMathjaxConfig = true; //配置完成,改为true
};
const MathQueue = async (elementId:string) => {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue
}
vue页面创建时
private $mathJax : any;//先默认设置为any任意属性
if(!this.$mathJax.isMathjaxConfig){
//判断是否初始配置,若无则配置。
this.$mathJax.initMathjaxConfig();
//若有,根据id把值变为公式
this.$mathJax.MathQueue(“question_” + item.id);
}