解决mathjax动态修改页面和在vue-cli中使用
我在第三方公司返回的数据中发现要用到mathjax,也是第一次碰到,于是百度了它的用法。
第一个遇到的问题是引入cdn后可以渲染初始的页面,但当动态渲染后,修改的页面就不会被mathjax重
新排版,下面是我的解决方案
updated() {
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML", function () {
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$', '$'], ['_$', '_$'], ['$$', '$$'], ['\\(', '\\)']] } });
// entry-content是文章页的内容div的class
let math = document.getElementsByClassName("myapp1")[0];
MathJax.Hub.Queue(["Typeset", MathJax.Hub, math]);
});
},
其中
['$', '$'], ['_$', '_$'], ['$$', '$$'], ['\\(', '\\)']]
document.getElementsByClassName("myapp1")[0];
是需要根据需求配置的,其他都是复制别人的^ ^
这些我都在单页面的的xx.html中实现了,然后我准备移到我的vue项目中(vue-cli开发),
首先引入jquery(为的使用$.getScript这个方法,其实就是加载url后有一个回调函数,也可以自己用别
的方法写),然后复制页面、方法。
这时上面代码中的MathJax对象会报错(错误:MathJax is undefinde),需要将MathJax改为
window.MathJax。可以打印window查看该对象
updated() {
this.$jquery.getScript('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML', function() {
window.MathJax.Hub.Config({ tex2jax: { inlineMath: [['$', '$'], ['_$', '_$'], ['$$', '$$'], ['\\(', '\\)']] }})
const math = document.getElementsByClassName('bottom')[0]
window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, math])
})
},
坑:npm install mathjax 后 import mathjax from ‘mathjax’ 在vue-cli中会直接报错(mathjax is
undefind),我查看mode_modules中的mathjax ,它的启动文件指向一个node-main.js文件,内容大
致是 (function(){})(), 是没有导出的