vue-cli中使用mathjax

解决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(){})(), 是没有导出的

上一篇:利用Docker容器技术构建自动化分布式web测试集群Selenium Grid


下一篇:常用网站地址