首页 > 代码库 > 在网页中显示数学公式
在网页中显示数学公式
本网站是一个理科网站，往往会涉及数学公式的输入和显示，而这在Web上一直是一个难题。所以参考了好几篇网上的文章，现将自己的学习成果整理一下。主要参考网址：章杨的blog的Web数学公式的输入和显示。
一．计算机表现数学公式的几种方法
1．面向桌面的TeX系统
TeX是Knuth教授开发的一种优秀的桌面电子排版系统。它提供了一套功能强大并且十分灵活的排版语言，有多达900多条指令，并且具有宏功能，用户可以不断地定义自己适用的新命令来扩展TeX系统的功能。
TeX系统有许多优点，如开源、易移植、排版质量高、输出结果与设备无关等。同时，它也是公认的最好的数学公式排版系统，它在数学和工程领域得到了广泛的使用，相关领域的学术论文基本都由TeX系统或其兼容系统（如LaTeX系统）排版生成。
在TeX系统中，各种数学符号和公式由不同的数学记号来表示，如\sin表示sin、\sqrt表示根号等。数学记号和数字的组合一般放在
和\]里面。下表中列出了几个数学公式及其TeX指令：
| 数学公式 | TeX指令 |
|---|---|
 | \frac{3+x}{5}\] |
| f（x）＝x2－1 | f(x)=x^2-1\] |
 | \sqrt[3]{x^4-3x+1}\] |
一般来说，TeX指令和它所表示的数学公式本身非常接近，或者是该数学符号的英文缩写。因此TeX指令比较直观、易学，也很方便输入，中小学数学涉及的数学符号更是如此。
但在中小学，公式的输入几乎不会用Tex，用的都是Word自带的公式编辑器，我这些年通常使用域代码，因为高中物理通常在输入分数、根号时才会涉及公式的输入，而这种简单的情况用公式编辑器有点大材小用，也比较难输，我通常只有在比较复杂的情况下（比如或矩阵）才使用公式编辑器。
2．面向互联网的数学标记语言MathML
TeX系统虽然能完美地显示数学公式，但是无法在互联网上使用。目前我采用的方法是将Word中的公式进行截图，在网页中用图像的方式显示公式，用这种方法比较费时，而且修改也不方便。而HTML超文本标记语言由于自身的缺陷，也很难显示数学公式。
针对这些问题，国际互联网协会（World Wide Web Consortium，W3C）于1997年成立了W3C数学工作组，制定一种基于XML语言标准的数学标记语言（Mathematical Markup Language，MathML）。该组织于1998年发布了MathML 1.0版本，当前最新版本是3.0，发布于2010年10月21日。 MathML语言主要从表现（Presentation）和内容（Content）两个维度来定义各种数学符号和公式。表现标记是从数学表达式的显示形式来描述数学公式，如<msup>标记表示上标符号，<msub>表示下标符号等；而内容标记是从数学表达式本身的内在含义进行描述数学公式，如<plus>标记表示相加。二者可以从各自的角度表示同一个数学公式，以
为例，表现标记和内容标记分别如下：
| 表现标记 | 内容标记 | ||||
|---|---|---|---|---|---|
?
| ?
|
MathML数学标记语言是一个国际标准，Mozilla/Firefox/Netscape（7.1+）浏览器已默认支持MathML语言，但Internet Explorer暂不支持MathML标准，需要安装MathPlayer插件来解析含有MathML标记的网页。
3．ASCIIMathML转换方法
简单地说，TeX指令和MathML标记语言是两种互补性很强的语言。采用TeX指令描述的数学公式简单、直观，但浏览器不能直接识别和显示；MathML数学标记语言虽然是为互联网而设计的，但它的标记语言又相对复杂，不便于输入。因此，有研究者结合两者的优点，开发了TeX指令与MathML自动转换的Java 程序，ASCIIMathML就是其中的佼佼者。
ASCIIMathML转换程序由美国加州查普曼（Chapman）大学Peter Jipsen开发，其设计思想是在网页上插入一段JS代码，将网页中的TeX指令（TeX/LaTeX-style）自动转换成MathML表现标记语言，再返回给支持MathML标准的网络浏览器识别和显示。
由于微软Internet Explorer浏览器不支持MathML标准，若要正确地显示数学公式，IE客户端还需要安装MathPlayer插件，这增加了用户的不便。因此，皮尔斯学院David Lippman在ASCIIMathML转换方法基础上，开发了ASCIIMath Image Fallback转换程序，该转换程序自动判断客户端浏览器是否支持MathML，若支持，则返回MathML表现标记；若不支持，则返回该公式的GIF图像（远程调用互联网上的cgi程序生成图像）。另外，作者也提供了ASCIIMathTeXImg转换，直接由TeX指令生成GIF图像，而无论用户使用的浏览器是否支持MathML。
在ASCIIMathML网站的最新消息是推荐一个新的转换程序MathJax，它是一个开源的JavaScript显示引擎，能够在所有当代浏览器上显示漂亮的数学公式，同时支持Tex和MathML表示。
4．其他方法
上面的方法需要用户在本地保留js文件，而有些网站将处理程序放置在服务器上，你只需在页面上传递公式的Tex表达，就会返回公式的图像，其实就是上述ASCIIMathTeXImg的服务器版本。我知道的是网站http://www.codecogs.com的服务，例如你想在网页上显示a2＋b2 的平方根，你只需在网页所在位置输入以下html代码：
1 | <img src="http://latex.codecogs.com/gif.latex?\sqrt{a^2+b^2}" title="\sqrt{a^2+b^2}" /> |
想使用起来更简单，可用点js代码，具体过程可参考在博客里轻松使用LaTeX数学公式，不再赘述。
二、在Web系统中显示和输入数学公式
从上面的内容可以知道，ASCIIMathML不是个好选择，在Firefox显示正常的公式在IE中只能显示源ASCII字符，使用http://www.codecogs.com无需在客户机下载js文件应该最快，但有点受制于人，万一这个网站服务不正常，那么我的网站上的所有公式图片都会显示不出来。
考虑到国内IE用户占绝大多数，因此决定采用ASCIIMath Image Fallback转换程序的方法，但采用的是更漂亮的MathJax。你只需在网页和之间添加js的地址即可：
1 | <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> |
由上面代码可知我们是通过CDN（distributed network service）安装这个js的，这也是推荐的方法，CDN可以自动从你的主机附近最快、最近的服务器上下载js文件，而且会自动升级。当然你也可以将MathJax下载到本地服务器上。然后在网页任意位置书写TeX指令描述的数学公式，注意：如果要让公式单独占一行，需用和\]将公式包起来，即以block显示，若想用inline，则用\ (和\)将公式包起来，而公式的具体表达可参见中文维基：数学公式，写得非常详细。
但是手工书写Tex公式还是非常难的，我使用的是大名鼎鼎的MathType，在这个软件的菜单栏选取Preferences→Cut and Copy Preferences...，如下图进行设置，就可以复制MathType的公式并粘贴为可用于MathJax的LeTex格式。
如果不使用桌面程序，你也可以使用在线的Tex公式编辑器，比方说http://www.codecogs.com/latex/eqneditor.php。
三、将MathJax公式粘贴到Word
如果直接在网页上将MathJax显示的公式粘贴到Word中，得到的只会是一些字符。正确的操作方法是：首先在网页的公式上右击打开上下文菜单点击MathML Code：
此时会弹出此公式的MathML代码，然后复制这些代码：
打开Word，粘贴为文本即可：
注意：这个方法只能使用在docx中，因为自Word 2007引入的新格式docx中的公式编辑器也重新设计过了，我猜这个方法可行的原因可能是微软的公式编辑器使用了Web标准的MathML语言。最后吐一下槽，微软的这个新公式编辑器用起来太别扭了，输个简单的公式也要弄半天，这几年来我几乎从没用过它。
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" href="../css/index.css"/> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [ [‘$‘,‘$‘], ["\\(","\\)"] ], displayMath: [ [‘$$‘,‘$$‘], ["\\[","\\]"] ], processEscapes: true }, "HTML-CSS": { availableFonts: ["TeX"] }, });</script> <script type="text/javascript" src="MathJax.js"></script></head><body> <div>设集合<span class="MathJye" mathtag="math" style="whiteSpace:nowrap;wordSpacing:normal;wordWrap:normal">M={x|0≤x≤<table cellpadding="-1" cellspacing="-1" style="margin-right:1px"><tr><td style="border-bottom:1px solid black">3</td></tr><tr><td>4</td></tr></table>}</span>，<span class="MathJye" mathtag="math" style="whiteSpace:nowrap;wordSpacing:normal;wordWrap:normal">N={x|<table cellpadding="-1" cellspacing="-1" style="margin-right:1px"><tr><td style="border-bottom:1px solid black">2</td></tr><tr><td>3</td></tr></table>≤x≤1}</span>，如果把b-a叫做集合{x|a≤x≤b}的“长度”，那么集合M∩N的“长度”是（ ）</div> <div>$\frac{x^3}{e^x-1}$</div> <div>$\frac{1}{12}$</div> <div>$\frac{1}{4}$</div></body></html>
在网页中显示数学公式