使用 MathJax 在 WordPress 中显示数学公式

  WordPress 上有多种显示数学公式的插件和方法,我先后用过 WP QuickLaTeX 插件和 JetPack 全家桶的 Beautiful Math,二者都是以图片的形式显示公式,兼容性强,但也都有一些不尽如人意的地方。

  WP QuickLaTeX 可以将 Latex 公式渲染为 svg 矢量图,在各种分辨率下都有一致的显示效果。但图片尺寸本身不会响应浏览器窗口尺寸,一些较长的公式在手机上会直接截断。

  JetPack 的 Beautiful Math 将 Latex 公式渲染为 png 图片,图片的显示是响应式的,会随浏览器窗口尺寸变化自动切换不同缩放的图片,在移动端也有很好的效果。但公式图片的背景是纯色的,公式后面如果有图或背景色,其显示效果就像一条胶带,粗暴地粘在精美的背景图片上。

  MathJax 是一个开源的针对 LaTeX、MathML 和 AsciiMath 的 JavaScript 显示引擎,直接在浏览器中对 LaTex 等进行渲染,显示效果极佳,对各种现代桌面和手机浏览器都有很好的支持。本文主要介绍在 WordPress 中使用 MathJax 的方法。

1. 方法一:手动配置

  打开 WordPress 后台,在外观/编辑下,编辑 header.php,在其中找到 head 结束的位置,在 </head> 前加入:

保存即可。

  之后就可以在文章中直接插入 Latex 公式,如:

会显示为:

\begin{equation}
\sigma(z) = \frac{1}{1 + e^{-z}}
\end{equation}

2. 方法二:使用插件

  通过 MathJax-LaTeXSimple Mathjax 这两个 WordPress 插件也可以直接使用 MathJax,也非常方便。

  以 MathJax-LaTeX 为例,安装并启用插件后,默认并不会启用 MathJax 的渲染功能,需要在文章开头添加 [mathjax] 这个标记,该文章才会启用 MathJax 渲染,可以防止意外渲染了不需要渲染的文章,特别是像下面开启 $ 定界符后。

3. 启用 $ 定界符

  MathJax 默认使用 $$...$$\[...\] 定界符来显示公式块,使用 \(...\)$...$ 定界符来显示行内公式,但使用 $...$ 显示行内公式的方式默认是禁用的,因为 $ 符号出现比较频繁,如连续的几个美元价格,容易误触发渲染。

  如果你之前通过其他方式使用了 $...$ 来显示行内公式(比如开头的两个),那么启用 MathJax 的 $...$ 定界符会减少很多迁移工作。启用方式也很简单,还是编辑 header.php,在 </head> 前加入:

4. 使用转义的 \

  在 WordPress 中使用 MathJax 时,一些 \ 需要转义为 \\。比如换行的 \\ 需要转义为 \\\\\[...\] 定界符也需要转义为 \\[...\\] 等。而一些特定用法前的 \ 则不需要转义,如 \begin\frac 等。例如下面的内容:

显示为:
\[
\begin{equation}
x = \frac{1}{2} \\
y = \theta_1
\end{equation}
\]