静态网页的 MathJax 加载与配置

这段时间用 Hexo 在重建自己的个人博客，发现文章中的公式一片狼藉，显然是换主题以后 MathJax 配置的锅。于是一不做二不休， 干脆去 MathJax 网站上仔细的看了一遍加载配置文档， 按着自己的需求配置了一遍 MathJax。

MathJax 加载方式

MathJax 有两种加载方式，一种是在本地安装，一种是通过 CDN 加载的方式使用， 这也是最简单的方式。这里采用 CDN 加载方式。

配置文件位置

不同的 Hexo 模板关于 MathJax 的 CDN 加载配置文件都可能以不同名字在不同的地方放着，但大体上都应该是一个 .ejs 文件。 对相应的 .ejs 做修改就好。当然，有些也有其他的配置方式(通过加载本地配置文件local.js)，但 CDN 加载的网址都是一样的。

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js   # 指定使用 2.7.5 版本的 Mathjax

https://cdnjs.cloudflare.com/ajax/libs/mathjax/latest/MathJax.js   # 每次都自动加载最新版本的 Mathjax

配置选项

现在进入主题，关于 Mathjax 的配置选项。 我个人使用的是 in-line configuration 方式，感觉这样方便点（也可以自己写本地配置文件，通过完整的引用路径加载。）

MathJax.Hub.Config()句柄

一般来说，MathJax 都是通过 MathJax.Hub.Config() 句柄来执行设置的。大致的形式如下：

[MathJax.Hub.Config()]

MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { fonts: ["TeX"] }
});

下面就重要的常用的一些配置选项进行简单说明。

核心配置选项

以下是部分控制 MathJax 核心行为的选项，只写一下最主要常用的一些选项，很多选项都是可选，不需要就不用添加，其他的移步至 The Core Configuration Options

jax: ["input/TeX","output/HTML-CSS"]

用于初始化输入输出的基本配置。

extensions: []

启动时预加载的相关拓展，比如 tex2jax，mml2jax等要调用的预处理器就可以填在这里。

config: []

如果使用本地配置文件，使用这一条加载本地配置文件。

styleSheets: []

如果有本地 CSS 加载本地 CSS 配置文件

preRemoveClass: "MathJax_Preview"

在 MathJax 尚未完成公式转换前，在公示位置预先显示 [math] 占位。

showProcessingMessages: true

是否显示 MathJax 加载处理信息。

showMathMenu: true
showMathMenuMSIE: true

是否显示公式展示菜单。设置为 true 时，在网页上对着生成的公式，鼠标右键点击，会显示一个公式菜单。

预处理器（Preprocessor）选项

MathJax 可调用的预处理器主要有以下四个：

• tex2jax
• mml2jax
• asciimath2jax
• jsmath2jax

应该大部分人应该都接触过$\LaTeX$, 所以使用 tex2jax 应该是比较方便的，这里也只谈谈这个预处理器的设置。其他请移步至 Preprocessor options

tex2jax 设置

要使用 tex2jax，在核心设置 extensions 里添加 tex2jax.js 即可。

基本常用的设置大致如下：

[tex2jax]

MathJax.Hub.Config({
    tex2jax: {
            inlineMath: [
                ['$','$']
            ],
            displayMath: [ 
                ['$$','$$'],
                ['\\[','\\]'] 
            ],
            processEscapes: true,
            processRefs: true,
            processEnvironments: true,
            preview: "TeX",
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code']
    }
});

其中：

• inlineMath： 设置行内公式的标识符。一般是 $...$。
• displayMath： 设置行间展示公式的标识符。一般是 $$...$$和\\[...\\]。(由于转义字符的缘故，不好设置为\[...\])。
• processEscapes: true： 设置为 true 时可用转义字符\$在数学公式中显示美元符号。
• processRefs: true： 数学环境内的公式引用功能开关
• processEnvironments: true： 对于$\LaTeX$ 环境(\begin{something}...\end{something})下的引用.
• preview: "TeX"： 核心设置中 MathJax_Preview 的加强版，可以设置为 "Tex"，也可以是指定图片或者字符串。比如preview: [["img",{src: "/images/mypic.jpg"}]]
• skipTags: ["script","noscript","style","textarea","pre","code"]： 由于部分 MathJax 的标签和 html 标签冲突， 所以可以通过这些这个设置添加需要跳过的特定标签。

输入处理器（input processor）设置

MathJax 可调用的 input 处理器主要有以下三个：

• TeX input processor
• MathML input processor
• AsciiMath input processor

常用的是 TeX input processor. 其他请移步至 Input processor options

TeX input processor 设置

这里介绍几个常用的设置项。

[TeX input processor]

MathJax.Hub.Config({
    TeX: {
        TagSide: "right"，
        equationNumbers: { 
            autoNumber: "AMS",
            useLabelIds: true
        },
        Macros: {}
    }
});

其中：

• TagSide: "right"： 标签位置
• equationNumbers:{...}：公式编号
  • autoNumber: "AMS"： 自动编号方式， 还可以设置为none（不自动编号） ，all （对所有展示公式编号） 等。
  • useLabelIds: true：设置应用公式时显示 \label名称（true）还是公式编号（false）。
• Macros: {}：其他想要定义的宏， 类似于 $\LaTeX$ 文档中的\def，\newcommand， \renewcommand， \newenvironment， \renewenvironment， 和 \let。

输出处理器（Output processor）设置

这一项的设置非常简单。请直接参考 Output processor options

我的 MathJax 配置

以下是我的 MathJax 配置， 供大家参考。

[My MathJax.Hub config]

MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: true,
            showMathMenu: true
        },
        SVG: {
            matchFontHeight: true
        },
        CommonHTML: {
            matchFontHeight: true
        },
        preRemoveClass: "MathJax_Preview",
        tex2jax: {
            inlineMath: [
                ['$','$']
            ],
            displayMath: [ 
                ['$$','$$'],
                ['\\[','\\]'] 
            ],
            processEscapes: true,
            processRefs: true,
            processEnvironments: true,
            preview: "TeX",
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code']
        },
        TeX: { 
            extensions: ["AMSmath.js", "AMSsymbols.js"],
            equationNumbers: { 
                autoNumber: "AMS",
                useLabelIds: true
            },
            Macros: {},
            MAXMACROS: 10000,
            MAXBUFFER: 5*1024
        },
    });