用 MathJax 让 WordPress 排版出漂亮的公式

从2014年下半年开始 MathJax CDN 在国内访问越来越不顺畅,因此我改为将 MathJax 直接部署在服务器上而不再连接其 CDN,这样对访问速度和渲染速度都有明显的提升。具体做法请访问官网

打算过几天写一篇学术性一点的文章, 因此可能会用到不少的公式。 搜了一下 WordPress 下公式输出的解决方案, 发现了这个 MathJax。其实如果只是偶尔用到几个公式需要显示的话, 图省事完全可以用图片来解决, 不过如果用到的公式数量比较多的话, 一张张图片粘贴就显得太弱了, 而且如果日后需要修改的话也是一件很麻烦的事。

MathJax 跟其他基于 LaTeX 的许多显示方案一样, 不需要网页浏览者安装任何插件或者脚本, 而且不管是 IE6+, Firefox3.0+, chrome, Safari, 还是其他任何千奇百怪的浏览器, 都能够很好地渲染公式样式。 而且我觉得 MathJax 算是字体较为美观的一个了。 关于 MathJax 的使用, 要得益于 Maxfan 的耐心指导。 本来我以为部署 MathJax 是一件很复杂的事, 后来才发现如此简单…

下面一段话从别处复制的:

MathJax 是一个开源的基于 Ajax 的数学公式显示的解决方案,其最大的优势在于可以以基于文本的方式显示页面中的数学公式。结合多种先进的Web技术,支持几乎所有的主流浏览器。MathJax 可以在HTML页面中,为LaTex数据和MathML数学公式提供了一个切实可行的的解决方案,支持Tex和LaTex、MathML、ASCIIMathML语言,拥有丰富的API接口。根据页面中定义的 LaTex 数据,便可生成对应的数学公式。

MathJax 的官网在这里, 如果需要阅读相关开发文档的话戳这里 ( 英文 )这里 ( 中文 ) 以及这里 ( PDF )。 目前 MathJax 好像只提供三种使用途径, 一个是官方推荐的直接使用 MathJax 的 CDN ( 内容分发网络 ) 进行调用, 另一个是使用针对不同平台开发的 MathJax 插件, 再一种是本地安装 MathJax 的内容然后调用。 我觉得吧, 除非处于没有网络连接的状况下, 否则完全没必要使用第三种方法。 直接用 CDN 是最省事的办法, 操作简单, 不往 WordPress 文件夹下加入任何内容, 不占本地存储空间。其实不光在 WordPress 下适用, 理论上任何平台都允许调用 MathJax 的代码, 最近知乎好像也支持公式直接输出了。 以 WordPress 为例, 只需要在主题的 heade.php 文件中的 与 之间加入代码

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

然后在后台编辑器直接输入 LaTeX 公式, 前台就能显示了。 超级简单的有没有。 来试试两个公式 ( 如果是显示代码的话稍等一下, 浏览器渲染需要一些时间 ):\[{a_n} = \frac{1}{\pi }\int_{ - \pi }^\pi {f(x)} \cos nx \mathrm{d} x\]

以及\[\left\{ \begin{array}{l}
\nabla \cdot B = 0\\
\nabla \cdot D = \rho \\
\nabla \times H = - \frac{{\partial D}}{{\partial t}} + j\\
\nabla \times E = - \frac{{\partial B}}{{\partial t}}
\end{array} \right.\]

再来试试行内公式: \(\underset{D_{1}}{\iint}\left (\frac{{\partial Q}}{{\partial x}} - \frac{{\partial P}}{{\partial y}} \right )dxdy = \oint_{AB} {Pdx + Qdy} \) 我是格林公式~ 显示效果还是挺棒的, 而且在 Firefox 下很明显要比 chrome 更清晰更圆润, 不知道为什么。 如果像我这种之前没用过 LaTeX 语法的人, 只能求助于 MathType 之类的公式编辑器了… 不过输入效率大大降低了。 MathType 可以设置为复制公式直接转换为 LaTeX 语言。

29 Comments

  1. Elvis 2017-10-09 Reply

    您好,如果用手机直接打开网页,会显示“移动网页”。移动网页显示出来的公式乱七八糟的(就是LaTeX 文本)。必须要点击“查看全部站点”即桌面版网页,公式才能正常显示。请问这个问题怎么解决呢?谢谢。

  2. goingmyway 2016-12-07 Reply

    你好,我的网页公式为什么这么乱?http://goingmyway.cn/?p=354

    • Author
      Captain 2016-12-07 Reply

      MathJax 默认是不允许用单美元符号来显示行内公式的,需要修改一下配置,可以看我这里说的 http://capbone.com/latex-notes-details/#MathJax
      方框的话应该是 LaTeX 语法有错;\[...\] 这种行间公式无法显示的话,我猜你是在 WordPress 的可视化编辑模式下敲入回车了,因为从你页面源码中可以看到有一个 </br> 把 LaTeX 代码打断了。建议你在 WordPress 的代码模式下编辑,公式也尽量不要加回车。

  3. wk 2016-11-19 Reply

    您好!
    我的网站也是WordPress搭建的,按照您说的方法,在header.php中加入

    但是,后台编辑好latex公式,前台没有显示出来啊?是不是还要现在 MathJax 插件?还是官方的MathJax 的 CDN是否失效了?

    具体细节不太懂,请指点一二,需要几个步骤?

    另外,MathJax相关的开发文档(中文pdf),链接失效了,能否重新分享出来?

    • Author
      captain 2016-11-19 Reply

      当然需要MathJax啊!官方的CDN好像挺早的时候国内就不好用了,部署到本地吧。文档我看的是英文的,中文的我也不知道哪里找。

      • wk 2016-11-20 Reply

        您的意思是,header.php中加入代码后,下载mathjax插件,然后把CDN部署到本地。三步吗?
        能否说下如何部署本地的CDN吗?

        • Author
          Captain 2016-11-20 Reply

          文档里都有的:http://docs.mathjax.org/en/latest/start.html#installing-your-own-copy-of-mathjax

  4. Anonymous 2016-06-28 Reply

    $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
    \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

  5. 数学辅导 2015-10-10 Reply

    使用数学公式编辑器引入的js文件来编排数学公式好是好,但是每次的加载速度明显慢了很多,还要进行编译,不知道有没有什么改进的办法没有????

    • Author
      Captain 2015-10-10 Reply

      我感觉实际上对速度影响不大,这点编译工作对大部分主机来说都是小菜一碟吧?不想编译的话应该只有使用图片形式了。

  6. 素人派 2015-08-17 Reply

    学习了。http://surenpi.com

  7. 刘文成 2015-06-05 Reply

    请版主给介绍一下mathjax在维基百科编辑上的具体应用

    • Author
      Captain 2015-06-05 Reply

      指的是语法和格式吗?

      • Anonymous 2015-06-08 Reply

        1 在线编辑时具体怎么将发布网站mathjax CDN和维基沙盒页面链接?
        2 怎么将那几个发布网站提供的语句
        放入页面源代码的头件后?(是右键点击维基编辑页面打开源代码再在,后面插入要求的那些语句么?)
        3 有什么配置要求么?有的话怎么做?
        4 另外 我也下载了mathlax-2.3 但完全不会用,网络基础太差,我想编辑的百科词汇里数学公式很多,所以头痛,希望版主帮助,谢谢版主。
        我QQ是 407485847 微信电话号码是 17142519311
        邮箱是 lwch2006gm@hotmail.com
        我有维基百科用户名和密码,如需要我告诉你。

  8. 1 2014-11-23 Reply

    直接用来写公式,自动生成mathjax
    http://webdemo.myscript.com/#/demo/equation

  9. 感谢分享,数学公式就是一块病,你帮了我大忙啦

  10. tennfy 2013-12-04 Reply

    有用处

  11. 有点蓝 2013-12-03 Reply

    一看就是高端大气的东东…

  12. JiaYin Zhang 2013-11-14 Reply

    哦。公式~~读书时候最头疼公式了。。。。。

  13. Bone 2013-11-03 Reply

    你打完一个公式上来…我手写一面公式完了…

  14. aaamaaan 2013-11-02 Reply

    效果不错!

Leave a reply

Your email address will not be published.