Jerrylou's Notes

labor for reward

0%

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文档查找：