2012年9月25日星期二

如何用科学的方法在网页中显示科学公式(MathJax+LaTeX)

这个是实验室项目提出的要求,最早先师姐让我解决上下标的问题,我采用<sub>和<sup>这两种html标签解决的这个问题。之后发现同时有上下标的情况没法解决。以下是更为科学的解决方案,显示各种科学公式毫无压力适用于HTML以及相关的JSP啊FTL啊PHP啊神马的Web页面貌似都能用。

首先简单介绍一下LaTeX这个高科技。
 http://zh.wikipedia.org/zh/LaTeX 
国外高端科技论文一般是不用Word这种东西排版的,一来Word是商业软件,二来Word各版本还不兼容,又不容易保证格式规范。一般都用LaTeX排版,你从网上下到的PDF文件都是用那个做出来的。我也分不清各种LaTeX以及TEX之间错综复杂的关系,知道个大概就行,反正我也没打算真学那一堆命令去输入公式。

渲染为公式——MathJax
在网页里将LaTeX公式渲染成跟Word公式编辑器编辑出来的一样的效果,需要MathJax,详情:
http://www.mathjax.org/
其实是用JavaScript、CSS之类的技术实现的,你可以把这个20MB大的东西下到你服务器或者电脑里用,也可以直接调用它的CDN,亲测用CDN更快。标签尽量靠前的位置插入:
在<head>标签尽量靠前的位置插入:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

?config= 后边跟的是配置,以什么方式输入以及以什么方式输出都在这里设置,具体可参见:
http://www.mathjax.org/docs/2.0/configuration.html#configuring-mathjax
这时候你网页上的LaTeX公式就会被渲染成应有的样子。

轻松写公式
那么如何不掌握那复杂的LaTeX命令而写公式呢?可以采用在线LaTeX编辑器: http://www.codecogs.com/latex/eqneditor.php
或者干脆用MathType,

用MathType输入公式(这个就简单多了),在编辑好公式之后,选项-剪切和复制选项,如图设置:

既在转换为其他文字里选LaTex(里面好几种LaTeX我分不清……貌似都差不多),取消那两个包括的勾勾。
现在用鼠标像选择文字一样选中公式,Ctrl+C,然后粘贴到网页里。上边例子中得到:
\[\sqrt {{b^2} - 4ac} + \frac{{ - b \pm \sqrt {{b^2} - 4ac} }}{{2a}}\]
这时候就需要修改下。如果你想要公式大一点像课本上公式定理的那样单独占一行,把包围公式本体的\[和\]改为$$和$$:
 $$\sqrt {{b^2} - 4ac} + \frac{{ - b \pm \sqrt {{b^2} - 4ac} }}{{2a}}$$
如果你想要公式小一点,跟你的文字放在同一行,则把中括号改为小括号:
\(\sqrt {{b^2} - 4ac} + \frac{{ - b \pm \sqrt {{b^2} - 4ac} }}{{2a}}\)
你问我为什么它不认识中括号?我也不知道,反正就这样了,我就这么用的有效果,谁弄明白了告诉我啊。


我们页面的数据是从数据库读出来的,到时候要求输入数据的人统一用MathType把公式弄好粘进去改一下括号就好啦,这样也不用特意培训他们去学LaTeX,我们也只要每个页面head部分加上一行引入js的代码就好了。
此外啰嗦几句。我是属于习惯用比较规整的代码去控制显示结果的,比如做页面一直用Notepad++去编辑HTML和CSS、JS,然后在浏览器里看结果。当然采用Dreamweaver这种可视化的编辑器拖来拖去很简单方便直观,但是不如写代码更接近本质,更加纯粹。
至于LaTeX排版这种高科技,我觉得我早晚要学习一下的,而且在中国的大学里滥用盗版Word非常不科学无视版权还要忍受调格式这么恶心的事情,理工科的孩子们真应该有这么一门课学习免费而又开放的LaTeX跟国际接轨,可以跟科技论文写作课放一起,或者学校拨点款给我们每人买套正版Office?