木匣子

Web/Game/Programming/Life etc.

酷炫的 MathJax 公式解析器

今天在查找圆形均匀分布的推导公式时,发现一个神奇的数学公式解析器,MathJax.

MathJax 是一款开源的 Javascript 数学公式解析引擎,可以运行在所有浏览器上!对于读者而言,无须安装任何插件或字体即可工作。

MathJax is an open source JavaScript display engine for mathematics that works in all browsers.

No more setup for readers. No more browser plugins. No more font installations… It just works.

MathJax 支持在网页上使用 MathML(一种用于数学的标记语言)、AsciiMath 或者 LaTex 来描述公式。然后通过嵌入 MathJax 的解析器脚本进行格式化。

你可以在自己的服务器搭建 MathJax 服务端,但官方建议直接使用他们的 CDN :

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

以 Tex 和 LaTex 为例,在嵌入解析器脚本之前可以做一些预配置:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

上面的配置表示使用 $ 公式 $ 或者 \( 公式 \) 来标行内公式。默认情况下,MathJax 使用

$$ 公式 $$

来标注块公式。更多的配置项可以参考这里

完整的例子

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

这里可以浏览以上 Hello World 示例输入出的结果。可以看出只需要在文章中正常书写公式,并在最外围加上相应标注,便可由 MathJax 显示出最终的公式,这使得它很方便的嵌入到其它系统中。


迫不及待想找个时间给 LaTex for typecho 增加 MathJax 功能了哈哈。