vue+ts引进Mathjax数学公式

  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);    

}