添加MathJax: 让你的前端支持数学公式显示

作为一个经常要和数学打交道的学生，怎么能少了数学公式呢？所以，这次给主题加上了显示LaTeX数学公式的功能。

MathJax演示

先来三条公式，分别是行内公式，跨行公式和超长的跨行公式，来看看显示的效果。 代码如下

$\alpha+\beta=\gamma$
$$\alpha+\beta=\gamma$$
$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$

显示效果如下(目前采用Katex进行渲染)：

这是一条行内公式： $\alpha+\beta=\gamma$

$$\alpha+\beta=\gamma$$

$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$

应该还不错。

$$\alpha+\beta=\gamma$$

使用MathJax

首先，要引入MathJax的js文件，根据文档，通过CDN引入制定版本，这里选择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"></script>

接下来需要初始化MathJax，加载配置文件（这里是将配置文件封装成了一个函数，只需要运行一次即可，每次运行只会降低性能）：

const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
      displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
    },
    "HTML-CSS": {
      availableFonts: ["STIX", "TeX"], //可选字体
      showMathMenu: false //关闭右击菜单显示
    }
  });
};

接下来就能够渲染页面了，首先要加载配置

initMathjaxConfig(); //加载配置
// 如果不传入第三个参数，则渲染整个document
// 我文章的容器ID为content，就用了content，加快渲染速度
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('content')]);

遇到的问题

• Nuxt貌似无法用npm安装，因为MathJax里用到了Window对象，而在服务端渲染的话，没有Window对象，会报错。我也没找到只让它在browser运行的代码。（很可能是因为我太菜
• 基于上一个问题，我只能动态加载js，然后在加载配置，渲染。
• 本站自带的阅读模式下，无法识别LaTex。（很好解决的一个问题。重新Queue一下就好，下次有空修复）