在博客中插入动态数学公式——基于MathTex的小工具
Foreword
这学期我们专业开设了“光电图像处理”这门课，因此我有意在博客园上发表一些相关的随笔。在写作过程中必将涉及到一些数学公式，需要在博客中嵌入公示图片。对此，我的一贯做法是：在Word中用公式编辑器中敲出一行公式，然后截图，上传，放置到博文中的相应位置即可。
公式少、较简单的话，此办法还是可行嘀。但是若公式非常复杂的话，word就会表示扛不住了。而且在截图的时候，对于公式四周的留白总不能很好的控制，插入博客中时，不能完美的居中。对于有一丁点儿完美主义倾向的我来说，总觉得这种解决方法太过野鸡。
因此，我打算在网上寻找一种比较好的“在web页面中插入公式”的解决方案。
About MathTex
我发现了一个比较不错的办法：MathTex。
看到这个单词，“Math”自然表示的是数学，因此可以猜出它是和数学有关的。
而“Tex”是什么呢？下面是摘自百度百科的介绍：
如上所述，Tex是非常NB的排版系统，而MathTex即是用Tex作为引擎，来生成数学公式的图片的。
既然Tex和Word都是排版的，那么有什么区别呢？区别就在于，Word基本是靠鼠标点点选选就了事儿，而Tex却是用纯手工代码编写的。手工编写意味着什么？意味着可以通过我们程序员敲出来的代码来掌控一切，而不是非常别扭的通过操控一个封装起来的黑盒子来间接实现。相信做过Asp.net的园友们懂了，这种差别，就像在开发ASP.NET网页时，用鼠标拖控件，和在后台手工输入html源码的差别。
OK，废话不多说，上一段例子，给大家一个感性的认识：
源码：
<img src="http://www.forkosh.dreamhost.com/mathtex.cgi?
x=\frac{{-b}\pm\sqrt{b^2-4ac}}{2a}"
alt="" border=0 align=middle>
图片：
分析：
大家可以仔细看一下源码，不错，它就是一个img标签，只需要在html文档中插入此标签，就会显示上面的图片。不信？可以右键“属性”，看一看图片的src就知道了。
再观察一下，聪明的你一定就会明白，原来它是利用了一个web service啊，其地址为“http://www.forkosh.dreamhost.com/mathtex.cgi”。而问号后面的语句，显然就是与公式相对应源码。
"\frac"就是分式的意思，后面跟着的{}{}，分别代表着分子与分母。我们来看一下分子，"\pm"代表着符号±，"\sqrt"则代表着取平方。而符号"^"，则显然表明为上标。
Solutions
MathTex的官方网址为：http://www.forkosh.com/mathtex.html，里面有更详细的描述。
以后在写博客需要插入公式的时候，就不需要再去打开word，敲公式，截图，上传了。而是只要在编辑器中插入一个img标签即可。倘若以后需要修改这个公式的话，不需要再去截图上传，只需在编辑器的“html”界面修改该img标签的src属性即可。听起来真的挺爽的！
但是仍然存在一些问题：
（1）用代码写公式，必要需要再去学习其语法，但是我想这对于一个程序员来说，基本上算不上什么，所以pass~
（2）真正使用的时候仍然非常不便：要插入一个公式，还得切换到html视图，在密密麻麻的代码中找到相关的位置，然后再去手工编写<img src="...."></img>，这样岂不是太麻烦了，甚至麻烦到让你觉得不如用word算了。
针对上面的第二个问题，我编写了一个基于Math的很小的工具（其实就是一个HTML页面），用于比较方便地生成公式。
截图如下：
界面非常简单：
左边 是一个代码输入框，用于输入相应的 Latex 代码。附带行号，支持自定义关键字的代码高亮。
中间 是一个按钮，点击一下，右边就会生成相关的公式（相当于F5），做的比较大是方便点击~
右边 则是用于生成相应的图片。
下面贴出相应的源码（注：代码高亮的实现，使用了一个开源项目的成果：CodePress，但在下面的源码中并未列出）
<html>
<head>
<title>mathTex</title>
<script src="Script/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Script/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script src="Script/RunHtml.js" type="text/javascript"></script>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="content">
<textarea cols="" rows="" id="latexCode"></textarea>
<button id="go">Go</button>
<div id="formulaImage">
<img id="texImage" alt="复制此图片，直接粘贴到html在线编辑器中即可"src="http://www.forkosh.dreamhost.com/mathtex.cgi?x=\sqrt{a^2+b^2}"/>
</div>
</div>
</div>
<div class="clear"></div>
<div id="footer"></div>
</div>
</body>
</html>
#wrapper
{
width:1300px;
margin:0 auto;
}
#latexCode
{
font-family: Consolas;
font-size: 15px;
line-height:1.5em;
float: left;
border: 1px solid Black;
width: 600px;
height: 550px;
background: #EDEDED;
}
#go
{
float:left;
width:70px;
height:550px;
margin:0 0 0 12px;
font-size:25px;
}
#formulaImage
{
float:left;
margin:0 0 0 12px;
border:1px solid Black;
padding:15px;
width:600px;
height:550px;
}
.clear
{
clear:both;
}
$(document).ready(function () {
$("#go").click(function () {
$("#texImage").hide('fast', function () {
$("#texImage").remove(); });
var $image = $("<img class='tex' id='texImage'/>");
var server = "http://www.quantnet.com/cgi-bin/mathtex.cgi?";
var code = $("LatexCode").text();
$image.attr("src", server + code);
$image.appendTo("#formulaImage");
});
});
大家如果需要源码的话，可点击此处下载。
然后只需打开文件MathTex.html后即可使用（注：在IE内核下可正常运行，但貌似Firefox不行......）
Usage
接下来，我简单地列举一些关于公式的Latex语法：
以上是我整理的语法汇总的pdf部分截图，完整版可以点此下载。
Try it
下面是一个在线运行模块，just have a try！
Undos
接下来谈一下还未完成的部分：
（1）关键字的完善：将所有的涉及公式的Latex语法的关键字加入到
（2）常用公式快捷键：增加一些快捷键，如“矩阵”、“多行公式”、“积分式”等，只要点一下就会出现相应的语句
（3）绘图功能：利用MathTex，不仅可以编写公式，还可以绘制图形，接下来要抽时间学习这一块了~
Ending
正如官网上所说，在MathML得到推广之前，使用这种基于Tex的动态公式图片，是一个比较不错的选择。
希望我的这篇文章能对大家有用！也希望博客园的文章中能够出现更多的数学公式！