MathJax3简单使用

最近接触的一个项目，需要用到MathJax在页面展示数学表达式，记录一个简单的使用教程。

先简单说一下项目背景，项目用的前后端分离的，前端用的vue，MathJax用的是最新的版本version 3，为什么要强调一下这个版本呢，因为MathJax版本3和版本2在配置上有很大的差别，所以使用的时候一定要注意版本，现在就来说一下MathJax3的配置。

一、配置

官网配置说明：http://docs.mathjax.org/en/latest/web/configuration.html#configuring-mathjax

这里我采用的是将配置信息单独放到一个js文件中，代码如下：

window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
  },
  chtml:{
	  scale:0.8
  }
};

(function () {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js';
  script.async = true;
  document.head.appendChild(script);
})();

二、使用

在需要用到的页面直接引用js即可

import '../static/js/load-mathJax.js'

页面使用的时候就直接在需要展示数学公式的地方用Tex的格式写出来就可以，代码如下：

<view class="question_title">
	$$fn(x)=\begin{cases}3x + 5y +  z \\7x - 2y + 4z \\-6x + 3y + 2z\end{cases} $$
</view>

其中$$表示独立行的公式，就像我代码块里这样，$表示行内公式（见配置-inlineMath），其它地方都一样，运行界面如下：

三：遇到问题

下面记几个遇到的小问题，希望可以帮到大家：

1、修改公式的字号

因为最开始的时候就是直接写的css样式，发现怎么都不起作用，后来不知道在哪儿看到说mathJax显示数学公式的时候是把每个字符都用一种字体表示，就不是文本，所以不能直接用css样式控制（这段话可以再讨论，因为实在记不清了，也欢迎大佬指教），最后翻了官网好久，查出来了scale参数（见配置scale），对于这个参数，官网的解释是这样的

The scaling factor for math compaired to the surrounding text. The CommonHTML output processor tries to match the ex-size of the mathematics with that of the text where it is placed, but you may want to adjust the results using this scaling factor. The user can also adjust this value using the contextual menu item associated with the typeset mathematics.

大家可以通过修改scale参数来调整公式的显示大小。

2、矩阵不换行

在学习过程中，开始在网上搜索公式进行显示测试，别的都还好，就是到矩阵的时候就出了问题，代码如下：

\begin{vmatrix}
x & y \\
z & v
\end{vmatrix}

期待结果：

实际结果：

|x y z v|

折腾了好久，后来也是借鉴了网友的经验，才知道这是因为换行符"\\"被转义了，我当时也考虑了这个问题，所以放到数据中时也多加了个\，想着就可以了，看到大佬的经验才知道需要写成\\\\才行。

总结：

以上就是我分享的关于MathJax3的一个简单入门，希望可以给到大家帮助，一起进步！也欢迎各位大佬指教，这只是我第一次用MathJax，了解的都不深，难免理解会有偏差，以后如果涉及到其他方面的问题，我也会及时更新到文章里。

最后，给大家分享一个MathJax公式的开源项目，写的很棒，感觉很有帮助。

https://1024th.github.io/MathJax_Tutorial_CN