前端通过MathJax显示数学公式（vue+MathJax）

一、关于MathJax

1. 官方网址：MathJax使用文档
2. 简介：MathJax支持使用LaTeX，MathML或AsciiMath语法在网页中渲染数学公式。我们常用的语法为LaTex,比如该论坛支持的也是LaTex 。

二、应用场景

    想实现在用户选择文件后能够直接在前端预览文件内容，如下：

三、遇到的问题

问题1(没有渲染效果)

问题描述：
    官网推荐使用CDN的方式，因此按照要求在index.html中添加了标签，并在vue组件中渲染。依然还是上面那个样子，并没有对公式进行渲染显示。
index.html:

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

xxx.vue：对question进行监视，内容改变后渲染界面。

watch: {
      question: function (value) {
        this.$nextTick(()=>{
          window.MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        })
      }
	}

解决办法：
    原来由于被qiang的原因，MathJax官网给出的加速的CDN是国外的，速度慢的感人，因此看不到效果，因此换成了国内的（BootCDN 等），由于好多CDN不提供该服务，终于找到一个可以用的。cloudflare的，如下：

<script type="text/javascript" async 
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

然后终于显示出来了，如下图：

问题2(行间公式不被渲染)

问题描述：
    看上图红框中的内容发现，还是有一部分行间公式没有被渲染，显示的依然是原来的状态。
解决办法：
    仔细阅读MathJax使用文档 发现，在MathJax的配置中说明了，如果想支持行间公司，需要做如下配置：注意2.x版本与3.x版本配置的书写方式不同，当然上面用的是2.7.5版本，因此就使用如下配置方式：

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
     MathJax.Hub.Config({
       tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}
      });
</script>

这样上面那个问题完美解决，效果如下：

四、未来的方向

原本很想使用3.0及以上版本的，奈何没找到合适的国内CDN加速，待高手评论区指点~~~

  
  
Email : Beyonderwei@Gmail.com
Website : http://beyonderwei.com
  
WeChat: