Vue is parsed using the mathJax dynamic loading formula
Determine if the MATHJax.js file is already loaded in the DOM. If not, append the js file to the body and put the js file in the CDN acceleration (do not change the directory structure, put the entire unzipped folder in the CDN together).
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 has loaded mathJax.hub. Queue(["Typeset", mathJax.hub]); // Queue may not work when data is lazily loaded, such as when you swipe left or right to get data, or when you slide to the current page, or when you get the data parsing formula for the first time. // 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; If vue-CLI is used, there is no need to add port. If it is manually configured, add port. I configured it on my own server, and automatically switch according to the development environment. //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); }Copy the code