在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甚至可以让你在你的网页上动态的创建公式。

插件集成

安装方法如下：

1	$ 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 即可。

1 2	# MathJax Support mathjax: true

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

1
2
3

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

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

如何使用

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

1	\$ 此处插入公式 \$

行间公式的形式，例如
$$ f(x)=x^2 $$
代码如下：

1	$$ 此处插入公式 $$

书写规则

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

希腊字母

名称	大写	Tex	小写	Tex
alpha	$A$	A	$\alpha$	\alpha
beta	$B$	B	$\beta$	\beta
gamma	$\Gamma$	\Gamma	$\gamma$	\gamma
delta	$\Delta$	\Delta	$\delta$	\delta
epsilon	$E$	E	$\epsilon$	\epsilon
zeta	$Z$	Z	$\zeta$	\zeta
eta	$H$	H	$\eta$	\eta
theta	$\Theta$	\Theta	$\theta$	\theta
iota	$I$	I	$\iota$	\iota
kappa	$K$	K	$\kappa$	\kappa
lambda	$\Lambda$	\Lambda	$\lambda$	\lambda
mu	$M$	M	$\mu$	\mu
nu	$N$	N	$\nu$	\nu
xi	$\Xi$	\Xi	$\xi$	\xi
omicron	$O$	O	$\omicron$	\omicron
pi	$\Pi$	\Pi	$\pi$	\pi
rho	$P$	P	$\rho$	\rho
sigma	$\Sigma$	\Sigma	$\sigma$	\sigma
tau	$T$	T	$\tau$	\tau
upsilon	$\Upsilon$	\Upsilon	$\upsilon$	\upsilon
phi	$\Phi$	\Phi	$\phi$	\phi
chi	$X$	X	$\chi$	\chi
psi	$\Psi$	\Psi	$\psi$	\psi
omega	$\Omega $	\Omega	$\omega$	\omega

一些字母变体 \epsilon \varepsilon \phi \varphi： $\epsilon \varepsilon \phi \varphi$

上标和下标

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

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

括号

小括号与方括号：使用原始的( )，[ ]即可，如，(2+3)[4+4]： $(2+3)[4+4]$
大括号：时由于大括号{ }被用来分组，因此需要使用\{和\}表示大括号，如，\{ a \ast b \} : $ \{ a \ast b \} $，还可以使用\lbrace 和\rbrace来表示,如，\lbrace a \ast b \rbrace： $\lbrace a \ast b \rbrace$。
尖括号：使用\langle 和 \rangle表示左尖括号和右尖括号。如，\langle x \rangle： $\langle x \rangle$。
上取整：使用\lceil 和 \rceil 表示。如，\lceil x \rceil： $\lceil x \rceil$。
下取整：使用\lfloor 和 \rfloor 表示。如，\lfloor x \rfloor： $\lfloor x \rfloor$。
不可见括号：使用.表示。

需要注意的是，原始符号并不会随着公式大小缩放。如，(\frac12)：(12)(12)。可以使用\left(…\right)来自适应的调整括号大小。如下，
$$\lbrace\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\rbrace\tag{1.1}$$
$$\left \lbrace \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} \right\rbrace\tag{1.2}$$
可以看到，公式1.2中的括号是经过缩放的。

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

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

字体

\mathbb 和 \Bbb: $\mathbb {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$ 黑板体
\mathbf: $\mathbf {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$ 粗体
\mathtt: $\mathtt {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$ 打印体
\mathrm: $\mathrm {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$ 罗马体
\mathcal: $\mathcal {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$
\mathscr: $\mathscr {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$手写体
\mathfrak: $\mathfrak {ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}$德国体

特殊的函数符号，考虑使用罗马字体，如\lim, \sin，而不是普通的lim, sin。如 \sin x $\sin x$,而不是 sin x $sin x$。对于

数学符号

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

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

表格

使用\begin{array}{列样式}…\end{array}这样的形式来创建表格，列样式可以是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{matrix}…\end{matrix}这样的形式来表示矩阵，在\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:$\begin{pmatrix}1&2\\3&4\\ \end{pmatrix}$ bmatrix:$\begin{bmatrix}1&2\\3&4\\ \end{bmatrix}$ Bmatrix:$\begin{Bmatrix}1&2\\3&4\\ \end{Bmatrix}$ vmatrix:$\begin{vmatrix}1&2\\3&4\\ \end{vmatrix}$ Vmatrix:$\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 $\cdots$ \ddots $\ddots$ \vdots $\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{aligned}
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{aligned}
\right.
$$
如果要对齐 = 号和项，可以使用\being{array}{列样式} .. \end{array}，如：
$$
\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}
$$