在Hexo中使用MathJax插入数学公式

日常工作喜欢用markdown写技术文档，免不了会碰到数学公式。最近迁移到hexo后，遇到了同样的麻烦，原生的Hexo并不支持数学公式的显示。google之，发现了MathJax，著名的Stackoverflow网站上的漂亮公式，就是使用了MathJax插件的效果。Mathjax号称Beautiful math in all browsers，在展示数学公式方面是不错的选择。

MathJax使用网络字体（大部分浏览器都支持）去产生高质量的排版，使其在所有分辨率都可缩放和显示，这远比使用包含公式的图片要有效得多。使用MathJax显示数学公式是基于文本的，而非图片。它可以被搜索引擎使用，这意味着方程式和页面上的文字一样是可以被搜索的。 MathJax允许页面作者使用TeX、LaTeX符号和 MathML 或者 AsciiMath 去书写公式。 MathJax甚至可以将Tex格式转化为MathML格式，使其可以被原生支持MathML格式的浏览器更多的渲染。转化为MathML格式后你可以复制粘贴它们到其他程序中。

MathJax是模块化的，所以它仅仅在需要时才加载它的组件，同时也可以被扩展以实现更多功能。 MathJax同时也是高度可配置的，允许作者作出更适宜网站自身的自定义。 如果你需要，MathJax的API甚至可以让你在你的网页上动态的创建公式。

插件集成

安装方法如下:

$ npm install hexo-math --save

在 _config.yml 文件中添加：

math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

如果你和笔者一样使用了next的主题，那么简单了。编辑主题的 _config.yml，将 mathjax 设定为 true 即可。

# MathJax Support
mathjax: true

此外，当然也可以手工集成，只需要在markdown文件中(hexo的文章页面因为需要页面解析，要添加在title等栏目后)，添加MathJax CDN，代码如下：

<script type="text/javascript"
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?">
</script>

就可以在md文件中插入Tex格式的公式了。
具体用法见Hexo MathJax插件.

如何使用

行内公式的形式，例如\(f(x)=x^{2}\)，代码如下：

\\( 此处插入公式 \\)

行间公式的形式，例如

$$f(x)=x^{2}$$

代码如下:

$$ 此处插入公式 $$

书写规则

看到别的网站上有MathJax解析的公式时，你可以通过右键菜单”Show Math As > TeX Commands”查看Tex格式。

希腊字母

一些字母变体 \epsilon \varepsilon \phi \varphi：$ \color{red}{\epsilon \varepsilon \phi \varphi} $

上标和下标

使用符号 ^ 和 _. 如, x_i^2: $ \color{red}{x_i^2} $.
此外，还需要了解一个”组”的概念。这个组既可以是一个符号也可以使是一个用{}括起来的公式。 比如10^10显示为$ \color{red}{10^10} $, 10^{10}才是你想要的结果：$ \color{red}{10^{10}} $.

$ \color{red}{在markdown中书写，因为$, \{, \}都是有特殊含义的，所以需要加\转义} $.

括号

• 小括号与方括号：使用原始的( )，[ ]即可，如，(2+3)[4+4]：$ \color{red}{(2+3)[4+4]} $.
• 大括号：时由于大括号{ }被用来分组，因此需要使用\{和\}表示大括号，如，\{a \ast b\} : $ \color{red}{\{a \ast b\}} $,还可以使用\lbrace 和\rbrace来表示,如，\lbrace a \ast b \rbrace：$ \color{red}{\lbrace a \ast b \rbrace} $.
• 尖括号：使用\langle 和 \rangle表示左尖括号和右尖括号。如，\langle x \rangle：$ \color{red}{\langle x \rangle} $.
• 上取整：使用\lceil 和 \rceil 表示。 如，\lceil x \rceil：$ \color{red}{\lceil x \rceil} $.
• 下取整：使用\lfloor 和 \rfloor 表示。如，\lfloor x \rfloor：$ \color{red}{\lfloor x \rfloor} $.
• 不可见括号：使用.表示。
  需要注意的是，原始符号并不会随着公式大小缩放。如，(\frac12)：(12)(12)。可以使用\left(…\right)来自适应的调整括号大小。如下， $$\{\sum_{i=0}^{n} i^{2} = \frac {(n^{2} + n)(2n + 1)} {6}\}$$ $$\left\{\sum_{i=0}^{n} i^{2} = \frac {(n^{2} + n)(2n + 1)} {6}\right\}$$ 可以看到，第二个公式中的括号是经过缩放的。

分式与根式(分号与开方)

• \frac ab 显示为$ \frac ab $ 而\frac{a+1}{b+1}显示为$ \color{red}{\frac{a+1}{b+1}} $
• \over: {a+1\over b+1}为 $ \color{red}{a+1\over b+1} $
• \sqrt: \sqrt{x^3} 为$ \color{red}{\sqrt{x^3}} $, \sqrt[3]{\frac xy}为$ \color{red}{\sqrt[3]{\frac xy}} $,更复杂的考虑{…}^{1/2}:$ \color{red}{…^{1/2}} $

字体

\mathbb 和 \Bbb: $ \color{red}{\mathbb{ABCDEFGHIJKLMNOPQRSTUVWXYZ}} $$ \color{red}{\Bbb{abcdefghijklmnopqrstuvwxyz}} $黑板体
\mathbf:$ \color{red}{\mathbf{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $粗体
\mathtt:$ \color{red}{\mathtt{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $打印体
\mathrm:$ \color{red}{\mathrm{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $罗马体
\mathcal:$ \color{red}{\mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $
\mathscr:$ \color{red}{\mathscr{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $手写体
\mathfrak:$ \color{red}{\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $德国体
特殊的函数符号，考虑使用罗马字体， 如\lim, \sin， 而不是普通的lim, sin。 如 \sin x $ \color{red}{\sin x} $,而不是 sin x$ \color{red}{sin x} $。 对于

数学符号

可以参考LaTeX符号简表和 LaTex符号列表。

• 求和：\sum，可使用上下标。如，\sum_1^n: $ \color{red}{\sum_1^n} $
• 积分：\int，可使用上下限。如，\int_1^\infty:$ \color{red}{\int_1^\infty} $
• 连乘：\prod:$ \color{red}{\prod} $
• \bigcup:$ \color{red}{\bigcup} $
• \bigcap:$ \color{red}{\bigcap} $
• \iint:$ \color{red}{\iint} $
• 极限：\lim可以使用下标, \lim_{x\to 0}:$ \color{red}{\lim_{x\to 0}} $
• 比较：\lt \gt \le \ge \neq:$ \color{red}{\lt\gt\le\ge\neq} $, 可以前面加\not否定: $ \color{red}{\not\lt\not\gt\not\le\not\ge\not\neq} $
• 运算：\times \div \pm \mp$ \color{red}{\times\div\pm\mp} $， \cdot居中，x \cdot y:$ \color{red}{x \cdot y} $
• 集合：\cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing:
  $ \color{red}{\cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing} $
• 排列：\choose 或 \binom, {n+1 \choose 2k} or \binom{n+1}{2k} :$ \color{red}{\binom{n+1}{2k}} $
• 箭头：\to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \implies \iff \longrightarrow:
  $ \color{red}{\to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \implies \iff \longrightarrow} $
• 逻辑：\land \lor \lnot \forall \exists \top \bot \vdash \vDash:$ \color{red}{\land \lor \lnot \forall \exists \top \bot \vdash \vDash} $
• 空格：或者\quad 和 \qquad，MathJax自己决定是否增加空格。所以一般你指定空格是没用的， 除非你用转义\。
• \star \ast \oplus \circ \bullet: $ \color{red}{\star \ast \oplus \circ \bullet} $
• \approx \sim \cong \equiv \prec: $ \color{red}{\approx \sim \cong \equiv \prec} $
• \infty \aleph_0 \nabla \partial \Im \Re:$ \color{red}{\infty \aleph_0 \nabla \partial \Im \Re} $
• a\equiv b\pmod n: $ \color{red}{a\equiv b\pmod n} $
• \ldots:$ \color{red}{\ldots a} $
• \cdots:$ \color{red}{\cdots a} $
• \hat:$ \color{red}{\hat x} $
• \widehat:$ \color{red}{\widehat {xy}} $
• \bar:$ \color{red}{\bar x} $
• \overline:$ \color{red}{\overline {xyz}} $
• \vec:$ \color{red}{\vec x} $
• \overrightarrow:$ \color{red}{\overrightarrow {xyz}} $
• \dot 和 \ddot:$ \color{red}{\dot x \ddot y} $

表格

使用这样的形式来创建表格，列样式可以是clr表示居中，左，右对齐，还可以使用|表示一条竖线。表格中 各行使用\分隔(hexo markdown中,需要使用\)，各列使用&分隔。使用\hline在本行前加入一条直线。 例如，

\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\\\
\hline
1 & 0.24 & 1 & 125 \\\\
2 & -1 & 189 & -8 \\\\
3 & -20 & 2000 & 1+10i \\\\
\end{array}

结果
\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\\\
\hline
1 & 0.24 & 1 & 125 \\\\
2 & -1 & 189 & -8 \\\\
3 & -20 & 2000 & 1+10i \\\\
\end{array}

矩阵

和表格很类似，使用这样的形式来表示矩阵，在\begin与\end之间加入矩阵中的元素即可。矩阵的行之间使用\分隔(hexo markdown中,需要使用\)，列之间使用&分隔。例如，

\begin{matrix}
1 & x & x^2 \\\\
1 & y & y^2 \\\\
1 & z & z^2 \\\\
\end{matrix}

结果

\begin{matrix}
1 & x & x^2 \\\\
1 & y & y^2 \\\\
1 & z & z^2 \\\\
\end{matrix}

如果要对矩阵加括号，可以像上文中提到的一样，使用\left与\right配合表示括号符号。也可以使用特殊的matrix。即替换begin{matrix}…end{matrix}中的matrix为pmatrix，bmatrix，Bmatrix，vmatrix,Vmatrix.
如pmatrix:$ \color{red}{\begin{pmatrix} 1&2\\\\ 3&4\\\\ \end{pmatrix}} $bmatrix:$ \color{red}{\begin{bmatrix} 1&2\\\\ 3&4\\\\ \end{bmatrix}} $Bmatrix:$ \color{red}{\begin{Bmatrix} 1&2\\\\ 3&4\\\\ \end{Bmatrix}} $vmatrix:$ \color{red}{\begin{vmatrix} 1&2\\\\ 3&4\\\\ \end{vmatrix}} $Vmatrix:$ \color{red}{\begin{Vmatrix} 1&2\\\\ 3&4\\\\ \end{Vmatrix}} $

增广矩阵, 需要使用前面的array来实现, 如

\left[
\begin{array}{cc|c}
    1&2&3\\\\
    4&5&6
\end{array}
\right]

结果：

$$\left[ \begin{array}{cc|c} 1&2&3\\ 4&5&6 \end{array} \right]$$

内联矩阵, \bigl(\begin{smallmatrix} ... \end{smallmatrix}\bigr), 效果如：

$$\bigl( \begin{smallmatrix} a & b \\ c & d \end{smallmatrix} \bigr)$$

可以使用\cdots$\color{red}{\cdots}$\ddots$\color{red}{\ddots}$\vdots$\color{red}{\vdots}$来省略矩阵中的元素，如：

$$\begin{pmatrix} 1 & a_1 & a_1^2 & \cdots & a_1^n \\ 1 & a_2 & a_2^2 & \cdots & a_2^n \\ \vdots & \vdots& \vdots & \ddots & \vdots \\ 1 & a_m & a_m^2 & \cdots & a_m^n \end{pmatrix}$$

公式对齐

有时候可能需要一系列的公式中等号对齐，如：

$$\begin{align} \sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\ & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\ & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right) \end{align}$$

这需要使用形如 \begin{align}…\end{align} 的格式，其中需要使用&来指示需要对齐的位置。请使用右键查看上述公式的代码。

分类表达式

定义函数的时候经常需要分情况给出表达式，可使用 \begin{cases}…\end{cases}。其中，使用\来分类，使用&指示需要对齐的位置。如：

$$f(n) = \begin{cases} n/2, & \text{if $n$ is even} \\ 3n+1, & \text{if $n$ is odd} \\ \end{cases}$$

上述公式的括号也可以移动到右侧，不过需要使用array来实现，如下：

$$\left. \begin{array}{l} \text{if $n$ is even:}&n/2\\ \text{if $n$ is odd:}&3n+1 \end{array} \right\} =f(n)$$

最后，如果想分类之间的垂直间隔变大，可以使用[2ex]代替\来分隔不同的情况。(3ex,4ex也可以用，1ex相当于原始距离）。

空间问题

不要在指数或者积分中使用 \frac
在指数或者积分表达式中使用\frac会使表达式看起来不清晰，因此在专业的数学排版中很少被使用。应该使用一个水平的/来代替，效果如下：

$$\begin{array}{cc} \mathrm{Bad} & \mathrm{Better} \\ \hline \\ e^{i\frac{\pi}2} \quad e^{\frac{i\pi}2}& e^{i\pi/2} \\ \int_{-\frac\pi2}^\frac\pi2 \sin x\,dx & \int_{-\pi/2}^{\pi/2}\sin x\,dx \\ \end{array}$$

使用 \mid 代替 | 作为分隔符
符号|作为分隔符时有排版空间大小的问题，应该使用\mid代替。效果如下：

$$\begin{array}{cc} \mathrm{Bad} & \mathrm{Better} \\ \hline \\ {x|x^2\in\Bbb Z} & {x\mid x^2\in\Bbb Z} \\ \end{array}$$

此外，在微分前应该使用\,来增加些许空间，否则$\TeX$会将微分紧凑地排列在一起。如下：

$$\begin{array}{cc} \mathrm{Bad} & \mathrm{Better} \\ \hline \\ \iiint_V f(x)dz dy dx & \iiint_V f(x)\,dz\,dy\,dx \end{array}$$

连分数

书写连分数表达式时，请使用\cfrac代替\frac或者\over两者效果对比如下：

$$x = a_0 + \cfrac{1^2}{a_1 + \cfrac{2^2}{a_2 + \cfrac{3^2}{a_3 + \cfrac{4^4}{a_4 + \cdots}}}} \tag{\cfrac}$$ $$x = a_0 + \frac{1^2}{a_1 + \frac{2^2}{a_2 + \frac{3^2}{a_3 + \frac{4^4}{a_4 + \cdots}}}} \tag{\frac}$$

方程组

使用\begin{array} … \end{array}与\left{…\right.配合，表示方程组，如：

$$\left\{ \begin{array}{c} a_1x+b_1y+c_1z=d_1 \\ a_2x+b_2y+c_2z=d_2 \\ a_3x+b_3y+c_3z=d_3 \end{array} \right.$$

同时，还可以使用\begin{cases}…\end{cases}表达同样的方程组，如：

$$\begin{cases} a_1x+b_1y+c_1z=d_1 \\ a_2x+b_2y+c_2z=d_2 \\ a_3x+b_3y+c_3z=d_3 \end{cases}$$

对齐方程组中的 = 号，可以使用 \being{aligned} .. \end{aligned}，如：

$$\left\{ \begin{array}{ll} a_1x+b_1y+c_1z &=d_1+e_1 \\ a_2x+b_2y &=d_2 \\ a_3x+b_3y+c_3z &=d_3 \end{array} \right.$$

颜色

命名颜色是浏览器相关的，如果浏览器没有定义相关的颜色名称，则相关文本将被渲染为黑色。以下颜色是HTML4与CSS2标准中定义的一些颜色，其应该被大多数浏览器定义了。

$$\begin{array}{|rc|} \hline \verb+\color{black}{text}+ & \color{black}{text} \\ \verb+\color{gray}{text}+ & \color{gray}{text} \\ \verb+\color{silver}{text}+ & \color{silver}{text} \\ \verb+\color{white}{text}+ & \color{white}{text} \\ \hline \verb+\color{maroon}{text}+ & \color{maroon}{text} \\ \verb+\color{red}{text}+ & \color{red}{text} \\ \verb+\color{yellow}{text}+ & \color{yellow}{text} \\ \verb+\color{lime}{text}+ & \color{lime}{text} \\ \verb+\color{olive}{text}+ & \color{olive}{text} \\ \verb+\color{green}{text}+ & \color{green}{text} \\ \verb+\color{teal}{text}+ & \color{teal}{text} \\ \verb+\color{aqua}{text}+ & \color{aqua}{text} \\ \verb+\color{blue}{text}+ & \color{blue}{text} \\ \verb+\color{navy}{text}+ & \color{navy}{text} \\ \verb+\color{purple}{text}+ & \color{purple}{text} \\ \verb+\color{fuchsia}{text}+ & \color{magenta}{text} \\ \hline \end{array}$$

此外，HTML5与CSS3也定义了一些颜色名称。同时，颜色也可以使用#rgb的形式来表示，r、g、b分别表示代表颜色值得16进制数，如：\color{\#0F0}{text}.更多点击这里 或 HTML色彩快速参考手册

删除线

$$\require{cancel}\begin{array}{rl} \verb|y+\cancel{x}| & y+\cancel{x}\\ \verb|\cancel{y+x}| & \cancel{y+x}\\ \verb|y+\bcancel{x}| & y+\bcancel{x}\\ \verb|y+\xcancel{x}| & y+\xcancel{x}\\ \verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x}\\ \verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\ \end{array}$$ $$\require{enclose}\begin{array}{rl} \verb|\enclose{horizontalstrike}{x+y}| & \enclose{horizontalstrike}{x+y}\\ \verb|\enclose{verticalstrike}{\frac xy}| & \enclose{verticalstrike}{\frac xy}\\ \verb|\enclose{updiagonalstrike}{x+y}| & \enclose{updiagonalstrike}{x+y}\\ \verb|\enclose{downdiagonalstrike}{x+y}| & \enclose{downdiagonalstrike}{x+y}\\ \verb|\enclose{horizontalstrike,updiagonalstrike}{x+y}| & \enclose{horizontalstrike,updiagonalstrike}{x+y}\\ \end{array}$$

参考资料

• MathJax basic tutorial and quick reference - StackExchange
• MathJax Docs
• Easy Copy MathJax
• 常用数学符号的 LaTeX 表示方法

转载自: http://blog.mobing.net/content/hexo/hexo-mathjax.html

---

施工中...