使用MathJax遇到的问题

1,523 阅读1分钟

vue使用mathJax动态加载公式进行解析

判断dom中是否已经加载了mathJax.js文件,如果没有加载就把js文件追加到body中,js文件放到cdn加速中(不要更改目录结构,把整个解压后的文件夹一起放到cdn中)

    let thisBody=document.getElementByTagName('body')[0] ,
        scripts=document.getElementByTagName('script'),'
        oldScript;
    for(let i=0;i<scripts.length;i++){
        oldScrip=scripts[i].hasAttribute('src')?scripts[i].getAttribute('src').indexOf('MathJax.js?config=')!=-1?script[i]:null:null;
        if(oldScript){
            break;
        }
    }
    if(oldScript){
        //js已加载
         MathJax.Hub.Queue(["Typeset", MathJax.Hub]); //在math容器里重载MathJax
         //当数据是懒加载获取时,比如左右滑动展示获取数据,滑动到当前页面,初次获取数据解析公式的时候,Queue这个方法可能就不适用了,该方法要慎用,使用这两个方法最好添加一个判断,什么使用使用Queue,什么时候使用Update,根据实际情况而定
         //MathJax.Hub.Update(["Typeset", MathJax.Hub])
    }else{
        let latexStyle=document.createElement('style'),
            latexScript=document.createElement('script');
            intLatex=latexScript.cloneNode(false);
        let protocol=localhost.protocol;
        let host=localhost.host;
        let port=localhost.port;
        //port端口视情况稳定,如果使用的是vue-cli,就不需要添加port,如果是手动配置的,添加port,我是配置在自己的服务器上,根据开发环境自动切换,也可固定一个baseUrl
        //let baseUrl=protocol+'//'+host+":"+port;
        let baseUrl=protocol+'//'+host;
        latexScript.setAttribute('src',baseUrl+"/MathJax-master/MathJax.js?config=TeX-MML-AM_CHTML");
        intLatex.setAttribute('type',"text/x-mathjax-config");
        intLatex.innterHTML="MathJax.Hub.Config({messageStyle: 'none',showMathMenu: false,tex2jax: {inlineMath: [['$','$']]}});";
        latexStyle.innerHTML = ".MathJax_CHTML{margin-top:5px;font-family: Arial, Chandara;margin-right:2px;}.MathJax{font-family: Arial, Chandara;}.MathJax span{line-height: normal !important;}";
        thisBody.appendChild(latexScript);
        thisBody.appendChild(intLatex);
        thisBody.appendChild(latexStyle);
    }