为WordPress添加MathJax支持

显示数学公式。

MathJax是什么?

MathJax是一个开源的数学公式显示脚本。其最大的优势在于可以以基于文本的方式显示页面中的数学公式。而且支持Tex和LaTex、MathML、ASCIIMathML语言来书写公式,完美支持各大主流浏览器,拥有丰富的API接口。

如何安装?

MathJax的安装十分简单,只需要一句代码就可以完成配置。

在WordPress中,把下面的代码插入“主题目录\header.php”的<head></head>中即可。

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

这将会调用MathJax自有的CDN进行显示,这也是推荐的方法。

Update:

现在已经不再推荐直接修改某一个主题的header.php,更加科学合理的做法是利用WordPress的脚本加载机制进行外部脚本的加载。具体方法为创建一个子主题,并在子主题的function.php中添加加载脚本的代码,

这里给出一个示例的function.php

function load_mathjax(){
	wp_enqueue_script('mathjax', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML,Safe', array(), '1.0', false);
}

add_action('wp_enqueue_scripts', 'load_mathjax');

另外,你也可以在自己的服务器上部署MathJax,这样就可以把上面的URL替换成你自己服务器的地址。

如何使用?

在默认设置情况下,其使用方法如下

182552iaaw1kurwaixh005.png.thumb

下面是一些例子:

麦克斯韦方程组(行间显示):

\[ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} \]

 

爱因斯坦场方程(行内显示):\( G_{\mu \nu }=R_{ \mu \nu }- \frac{1}{2}g_{\mu \nu }R=\frac{8\pi G}{c^{4}}T_{\mu \nu } \)

更多内容参见MathJax官方网站(英文):
http://www.mathjax.org/

《为WordPress添加MathJax支持》上有11条评论

  1. 为啥我加入这句话后 ,进入文章的预览模式之后 公式只看到了一眼,然后它就没了…

    Google Chrome 77.0.3865.90 Google Chrome 77.0.3865.90 Windows 10 x64 Edition Windows 10 x64 Edition
    1. 本文中提到的方法仅适用于文章页面的显示,预览模式下可能并不会加载之间的脚本。

      Firefox 69.0 Firefox 69.0 Mac OS X  10.14 Mac OS X 10.14
  2. 你好,请问楼主有写过矩阵吗?我不知道是语法写错了,还是 Mathjax 没生效,但是普通的等式可以加载出来的,而且我矩阵查了语句也没有问题,在CSDN上可以渲染。我使用过\begin{matrix}, \begin{bmatrix} 和 \begin{array}。感谢!

    Google Chrome 80.0.3987.163 Google Chrome 80.0.3987.163 Windows 10 x64 Edition Windows 10 x64 Edition
    1. 经过我的测试,我这里的MathJax显示矩阵是没有问题的。显示出现问题可能要看你具体使用的加载方式和配置。文中使用的MathJax版本是2.7,现在最新的版本是3.0,两个版本之间的配置存在一定的差异,建议参考MathJax网站上的相关文档[1]。本文仅仅提供了一个配置上的思路。如果在配置上确实有困难,直接使用WordPress插件仓库里的相关插件[2]可能会更方便一些。

      [1]: https://docs.mathjax.org/en/latest/
      [2]: https://wordpress.org/plugins/search/mathjax/

      Firefox 68.0 Firefox 68.0 Windows 10 Windows 10
      1. 感谢,经过我测试发现是我的编辑器在渲染 markdown 时把我的换行的 \\ 去掉了,已经解决。感谢

        Google Chrome 80.0.3987.163 Google Chrome 80.0.3987.163 Windows 10 x64 Edition Windows 10 x64 Edition

梦月酱进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注