MathJax: 在网页上显示 LaTeX 数学公式

最后更新日期：2019-09-21

• 2019-09-21

  迁移到 KaTeX

• 2011-05-02

　　在网页上显示数学公式，以前我知道的有这几种方法：

1. W3C 的 MathML -> 只有少数浏览器支持，不同浏览器显示不一致，而且最关键的是：太丑
2. mimetex -> 只能保存成图片，不能做成矢量图，制作 PDF 时效果较差

　　后来偶然在班固米上看到了 MathJax 这个神器：不但漂亮，而且使用 CSS 的 @font-face ，让出来的数学公式不是图片。我对班固米上的大神感到由衷地敬佩。。。

　　让我们先从那耳熟能详的求根公式开始：（可能速度比较慢，请耐心等待）

x=−b±b2−4ac2ax = \frac{-b\pm\sqrt{b^2-4ac}}{2a}x=2a−b±b2−4ac​​

　　然后，让我们看看高斯公式：

∭Ω(∂P∂x+∂Q∂y+∂R∂z)dv=∮SPdydz+Qdzdx+Rdxdy\iiint_\Omega(\frac{\partial P}{\partial x}+\frac{\partial Q}{\partial y}+\frac{\partial R}{\partial z})dv=\oint_S Pdydz+Qdzdx+Rdxdy∭Ω​(∂x∂P​+∂y∂Q​+∂z∂R​)dv=∮S​Pdydz+Qdzdx+Rdxdy

　　矩阵也是可以的：

[1x1y1z11x2y2z21x3y3z31x4y4z4][a1a2a3a4]=[T1T2T3T4]\left[\begin{array}{cccc}1&x_1&y_1&z_1\\1&x_2&y_2&z_2\\1&x_3&y_3&z_3\\1&x_4&y_4&z_4\end{array}\right]\left[\begin{array}{c}a_1\\a_2\\a_3\\a_4\end{array}\right]=\left[\begin{array}{c}T_1\\T_2\\T_3\\T_4\end{array}\right]⎣⎢⎢⎢⎡​1111​x1​x2​x3​x4​​y1​y2​y3​y4​​z1​z2​z3​z4​​⎦⎥⎥⎥⎤​⎣⎢⎢⎢⎡​a1​a2​a3​a4​​⎦⎥⎥⎥⎤​=⎣⎢⎢⎢⎡​T1​T2​T3​T4​​⎦⎥⎥⎥⎤​

　　下面是 LaTeX 公式常用符号 cheatsheet ：

1. 希腊字母

2. 花体字

3. 微积分

LaTeX 显示效果 \int ∫\int∫ \iint ∬\iint∬ \iiint ∭\iiint∭ \oint ∮\oint∮ \oiint \oiint\oiint∬​ \partial ∂\partial∂ \infty ∞\infty∞ \prime ′\prime′ \dot x x˙\dot xx˙ \ddot x x¨\ddot xx¨ \lim lim⁡\limlim \log log⁡\loglog LaTeX 显示效果 \frac12 12\frac1221​ \pm ±\pm± \sum ∑\sum∑ \prod ∏\prod∏ \times ×\times× \neq ≠\neq= \geq ≥\geq≥ \leq ≤\leq≤ \geqslant ⩾\geqslant⩾ \leqslant ⩽\leqslant⩽ \in ∈\in∈ \notin ∉\notin∈/ \subseteq ⊆\subseteq⊆ \subset ⊂\subset⊂ \cup ∪\cup∪ \cap ∩\cap∩ \sqrt2 2\sqrt22​ \tilde x x~\tilde xx~ \vec x x⃗\vec xx \binom{3}{1} (31)\binom{3}{1}(13​)

LaTeX

显示效果

\left[
\begin{array}{cc}
a11 & a12 \\
a21 & a22
\end{array}
\right]

[a11a12a21a22]\left[\begin{array}{cc}a11&a12\\a21&a22\end{array}\right][a11a21​a12a22​]

LaTeX 显示效果 \ \   空格 \dots …\dots… \rightarrow →\rightarrow→ \leftarrow ←\leftarrow←

LaTeX

显示效果

\begin{aligned}
(a+b)^2 &= (a+b)(a+b) \\
        &= a^2+2ab+b^2
\end{aligned}

(a+b)2=(a+b)(a+b)=a2+2ab+b2\begin{aligned} (a+b)^2 &= (a+b)(a+b) \\ &= a^2+2ab+b^2 \end{aligned}(a+b)2​=(a+b)(a+b)=a2+2ab+b2​ align 模式，按 & 的位置上下对齐

2019-09-21 更新

　　现在我的博客已经全面采用 KaTeX 来渲染数学公式，它比 MathJax 更快，而且设计之初就考虑了服务端渲染。虽然最新的 MathJax 3.0 支持了服务端渲染，但浏览器只支持到 IE 11 又让我只能放弃。所以本页面上你看到的都是 KaTeX 的渲染结果。