使用 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>
前加入:
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
保存即可。
之后就可以在文章中直接插入 Latex 公式,如:
\begin{equation} \sigma(z) = \frac{1}{1 + e^{-z}} \end{equation}
会显示为:
\begin{equation}
\sigma(z) = \frac{1}{1 + e^{-z}}
\end{equation}
2. 方法二:使用插件
通过 MathJax-LaTeX 或 Simple Mathjax 这两个 WordPress 插件也可以直接使用 MathJax,也非常方便。
以 MathJax-LaTeX 为例,安装并启用插件后,默认并不会启用 MathJax 的渲染功能,需要在文章开头添加 这个标记,该文章才会启用 MathJax 渲染,可以防止意外渲染了不需要渲染的文章,特别是像下面开启 $
定界符后。
3. 启用 $ 定界符
MathJax 默认使用 $$...$$
和 \[...\]
定界符来显示公式块,使用 \(...\)
和 $...$
定界符来显示行内公式,但使用 $...$
显示行内公式的方式默认是禁用的,因为 $
符号出现比较频繁,如连续的几个美元价格,容易误触发渲染。
如果你之前通过其他方式使用了 $...$
来显示行内公式(比如开头的两个),那么启用 MathJax 的 $...$
定界符会减少很多迁移工作。启用方式也很简单,还是编辑 header.php
,在 </head>
前加入:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); </script>
4. 使用转义的 \
在 WordPress 中使用 MathJax 时,一些 \
需要转义为 \\
。比如换行的 \\
需要转义为 \\\\
,\[...\]
定界符也需要转义为 \\[...\\]
等。而一些特定用法前的 \
则不需要转义,如 \begin
、\frac
等。例如下面的内容:
\\[ \begin{equation} x = \frac{1}{2} \\\\ y = \theta_1 \end{equation} \\]
显示为:
\[
\begin{equation}
x = \frac{1}{2} \\
y = \theta_1
\end{equation}
\]