如何在网页中显示数学公式

之前写贝叶斯分类相关文章的时候,就想到如果我要写公式怎么办,如果直接用普通字符写出来恐怕不太美观,就像前面写标签云的时候一样,连个方程组写出来都很难看。于是就上网搜了些资料,看看怎么能像word一样显示数学公式。当然也顺便为了拯救难看的方程组。

一开始看到了开源中国上的关于MathML的文章,文章有点长没看完只看了开头。知道了MathML其实就是类似XML一样的显示数学公式的协议规范。

MathML 是一个用于标记数学表达式的 XML 词汇表,它包含两个子语言:Presentation MathML 和 Content MathML。Presentation MathML 主要负责描述数学表达式的布局(因此可与 TeX 或更早的 SGML 标记语言相比较,SGML 用于描述诸如 ISO 12083 之类格式的数学表达式的布局)。Content MathML 主要负责标记表达式的某些含义或数学结构。

MathML比较复杂,看起来比较适合机器去处理,汗。后面通过http://www.cs.tut.fi/~jkorpela/math/ 看到了MathJax, jqMath . 先入为主的看了MathJax, 效果也还不错。不过如果对速度有要求的话jqMath可能更好。

配置MathJax的话比较简单,只需要引入脚本文件即可

<script type="text/javascript" src="/static/js/mathjax/MathJax.js?config=AM_HTMLorMML-full"></script>.

然后只要用符合规范的语法写数学公式就可以了。

MathJax支持的语法有TeX, LaTeX, MathML, 和 AsciiMath。AsciiMath呢看上去写法比较接近平常打数学公式的形式,于是我就采用了AsciiMath的配置 AM_HTMLorMML-full

当然其他几种语法标记也有对应的配置,如果要改变的话只需要将脚本中config的值改为对应的配置即可。可选配置如下

  • TeX-AMS-MML_HTMLorMML - 支持TeX, LaTex, MathML 的标记,可以 以MathML, 和 HTML-CSS 输出

  • TeX-AMS_HTML - 支持TeX, LaTeX 标记, 以HTML-CSS 输出

  • MML_HTMLorMML - 只支持MathML,可以以 MathML 和 HTML-CSS 输出

  • AM_HTMLorMML - 只支持AsciiMath 标记, 可以以 MathML 和 HTML-CSS 输出

  • TeX-AMS-MML_SVG - 支持TeX, LaTex, MathML, 但是是以SVG的方式输出

  • TeX-MML-AM_HTMLorMML - 支持Tex, LaTex, MathML, AsciiMath, 可以以MathML 和 HTML-CSS的样式输出

至于是否以MathML输出要看浏览器支不支持。

采用AsciiMath的话, 只要将公式放在反引号(back quote)`之间就可以了,比如求根公式,比较粗糙的写出来是这样的:

x = (-b +- sqrt(b^2-4ac))/(2a)

然后MathJax渲染后是这样的:

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

看上去是很美观的。

由于自己独立博客架在新浪云上,默认代码空间只有100M,但是看了下MathJax的文件居然要100多兆,而且上传也不给力,所以又搜了下,发现在引入MathJax.js的时候可以用到CDN上拉,相应的前面的脚本改为:

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

这样的话就不用上传文件。

当然上面可以有说的不对的地方,为了急于实现功能,很多文章都是粗略看了个大概,肯定有很多疏漏的地方。后面我还会对一下细小的概念进行补充。