Html中支持数学公式,MathJax

MathJax允许你在你的网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被javascript处理为HTML、SVG或者MathML符号。

这里有三种方法获取MathJax:最简单的方法就是使用分布式网络服务中的MathJax的副本,它位于 cdn.mathjax.org ,但是你也可以下载并安装一个MathJax的副本到你的服务器,或者使用在你本地硬盘的副本(这样是不需要使用网络)。这三种方法接下来的内容中都有详细的描述。这个页面描述了最简单快捷的设置MathJax并在你的页面运行的方法,但是你也许需要阅读更多细节以帮助你为你的网页定制一些设置。

示例

话不多说,先看下用MathJax编写的公式效果。

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}.$$

接下来看下如下编写Mahtjax。

编写格式

MathJax有三种编写格式,如下:

  • TeX和LaTeX格式
  • MathML格式
  • AsciiMath格式

TeX和LaTeX

编写Tex和LaTex时,需要将下面代码引入html的head或body中。

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

配置分隔符

1
2
3
4
5
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

默认的公式分隔符是 $$...$$\[...\] ,还有 \(...\) 常用于段落中的公式。请特别注意, \(...\) 分隔符 不是 默认使用的。美元符号$常常在其他情况下使用,这会导致本文被错误的当做公式解析了。

编写Tex和LaTex公式

1
2
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}.$$

MathML

同样需要将下面代码引入html的head或body中。

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

编写MathML公式(html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><mo>&#x2260;</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>&#x2212;</mo>
<mi>b</mi>
<mo>&#x00B1;</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>&#x2212;</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</p>

AsciiMath

需要将下面代码引入html的head或body中(与上面的引入不相同)。

1
2
3
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full">
</script>

编写MathML公式

1
2
3
4
5
<p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and
they are</p>
<p style="text-align:center">
`x = (-b +- sqrt(b^2-4ac))/(2a) .`
</p>

总结

AsciiMath相对要简洁些,是MathJax2.0提出的。选择哪种方式根据实际情况而定。更多的编写方法从下面提供MathJax文档查找: