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

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

修订历史

正文

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

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

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

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

x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}

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

\iiint_\Omega(\frac{\partial P}{\partial x}+\frac{\partial Q}{\partial y}+\frac{\partial R}{\partial z})dv=\oint_S Pdydz+Qdzdx+Rdxdy

　　矩阵也是可以的：

\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]

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

1. 希腊字母

LaTeX 显示效果
\alpha \alpha
\beta \beta
\gamma \gamma
\delta \delta
\omega \omega
\rho \rho
\tau \tau
\lambda \lambda

2. 花体字

LaTeX 显示效果
\mathcal{L} \mathcal{L}
\mathcal{M} \mathcal{M}
\mathbb{P} \mathbb{P}
\mathbb{R} \mathbb{R}

3. 微积分

LaTeX 显示效果
\int \int
\iint \iint
\iiint \iiint
\oint \oint
\oiint \oiint
\partial \partial
\infty \infty
\prime \prime
\dot x \dot x
\ddot x \ddot x
\lim \lim
\log \log

4. 代数

LaTeX 显示效果
\frac12 \frac12
\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 \sqrt2
\tilde x \tilde x
\vec x \vec x
\binom{3}{1} \binom{3}{1}
LaTeX 显示效果 
\left[
\begin{array}{cc}
a11 & a12 \\
a21 & a22
\end{array}
\right]
 \left[\begin{array}{cc}a11&a12\\a21&a22\end{array}\right]

5. 杂项

LaTeX 显示效果
\ \ 空格
\dots \dots
\rightarrow \rightarrow
\leftarrow \leftarrow
LaTeX 显示效果 
\begin{aligned}
(a+b)^2 &= (a+b)(a+b) \\
        &= a^2+2ab+b^2
\end{aligned}
 \begin{aligned} (a+b)^2 &= (a+b)(a+b) \\ &= a^2+2ab+b^2 \end{aligned} align 模式，按 & 的位置上下对齐

2019-09-21 更新

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