这学期我们专业开设了“光电图像处理”这门课，因此我有意在博客园上发表一些相关的随笔。在写作过程中必将涉及到一些数学公式，需要在博客中嵌入公示图片。对此，我的一贯做法是：在Word中用公式编辑器中敲出一行公式，然后截图，上传，放置到博文中的相应位置即可。
公式少、较简单的话，此办法还是可行嘀。但是若公式非常复杂的话，word就会表示扛不住了。而且在截图的时候，对于公式四周的留白总不能很好的控制，插入博客中时，不能完美的居中。对于有一丁点儿完美主义倾向的我来说，总觉得这种解决方法太过野鸡。
因此，我打算在网上寻找一种比较好的“在web页面中插入公式”的解决方案。
About MathTex
我发现了一个比较不错的办法：MathTex。
看到这个单词，“Math”自然表示的是数学，因此可以猜出它是和数学有关的。
而“Tex”是什么呢？下面是摘自百度百科的介绍：
TeX是由著名的计算机科学家Donald E. Knuth（高德纳）发明的排版系统。它在学术界十分流行，特别是数学、物理学和计算机科学界。TeX被普遍认为是一个很好的 排版工具，特别是在处理复杂的数学公式时。利用诸如LaTeX等终端软件，TeX就能够排版出精美的文本。通过ctan上的宏包可以扩展其功能，可以作幻灯片，定义模板。中文支持可以由CCT，CJK来完成。
如上所述，Tex是非常NB的排版系统，而MathTex即是用Tex作为引擎，来生成数学公式的图片的。
既然Tex和Word都是排版的，那么有什么区别呢？区别就在于，Word基本是靠鼠标点点选选就了事儿，而Tex却是用纯手工代码编写的。手工编写意味着什么？意味着可以通过我们程序员敲出来的代码来掌控一切，而不是非常别扭的通过操控一个封装起来的黑盒子来间接实现。相信做过Asp.net的园友们懂了，这种差别，就像在开发ASP.NET网页时，用鼠标拖控件，和在后台手工输入html源码的差别。
OK，废话不多说，上一段例子，给大家一个感性的认识：
源码：
图片：
分析：
大家可以仔细看一下源码，不错，它就是一个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视图，在密密麻麻的代码中找到相关的位置，然后再去手工编写
针对上面的第二个问题，我编写了一个基于Math的很小的工具（其实就是一个HTML页面），用于比较方便地生成公式。
截图如下：
界面非常简单：
左边 是一个代码输入框，用于输入相应的 Latex 代码。附带行号，支持自定义关键字的代码高亮。
中间 是一个按钮，点击一下，右边就会生成相关的公式（相当于F5），做的比较大是方便点击~
右边 则是用于生成相应的图片。
下面贴出相应的源码（注：代码高亮的实现，使用了一个开源项目的成果：CodePress，但在下面的源码中并未列出）
- mathTex.html
- RunHtml.js
- style.css
x=\sqrt{a^2+b^2}"/>
#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 = $("
大家如果需要源码的话，可点击此处下载。
然后只需打开文件MathTex.html后即可使用（注：在IE内核下可正常运行，但貌似Firefox不行/Files/20113/0c3eadee-0ea4-4874-93e8-85633c3627a4...）
Usage
接下来，我简单地列举一些关于公式的Latex语法：
以上是我整理的语法汇总的pdf部分截图，完整版可以点此下载。Try it
下面是一个在线运行模块，just have a try！
Undos
接下来谈一下还未完成的部分：
（1）关键字的完善：将所有的涉及公式的Latex语法的关键字加入到
（2）常用公式快捷键：增加一些快捷键，如“矩阵”、“多行公式”、“积分式”等，只要点一下就会出现相应的语句
（3）绘图功能：利用MathTex，不仅可以编写公式，还可以绘制图形，接下来要抽时间学习这一块了~
Ending
正如官网上所说，在MathML得到推广之前，使用这种基于Tex的动态公式图片，是一个比较不错的选择。
希望我的这篇文章能对大家有用！也希望博客园的文章中能够出现更多的数学公式！
最新评论