前端通过MathJax显示数学公式

一、关于MathJax

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

   二、应用场景

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

三、遇到的问题

问题1(没有渲染效果)

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

1 2 3

<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进行监视，内容改变后渲染界面。

1 2 3 4 5 6 7

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

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

1 2 3

<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版本，因此就使用如下配置方式：

1 2 3 4 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加速，待高手评论区指点~~~

---

• ← Previous Post
• Next Post →

---