在网页上显示公式的方法

柔光的暖阳◎ 2022-08-07 01:56 415阅读 0赞

转自：[http://www.iyear.net/bencandy.php?fid=8&aid=61][http_www.iyear.net_bencandy.php_fid_8_aid_61]

<table style="table-layout: fixed; word-wrap: break-word;"> 
 <tbody> 
 <tr> 
 <td align="left"> <h3><img style="border-color: #000000;" src="http://www.iyear.net/upload_files/article/8/1_20081130151153_Nzg3MGYx.png" alt="" width="500" height="212"></h3> <h3>这篇文章的基础是几个月前在小百合那边的blog里写的一些东西，当时距离2007年初的宇宙驿站搬家已有大半年，由于种种原因，原有的公式插件无法在新服务器上继续使用，用图片凑合若干次之后终于忍无可忍，于是装了个mimetex，顺便做了一下总结。还是在这里再发一遍，也趁机作些补充吧。<a rel="nofollow"></a></h3> 
 <div> 
 数学公式的显示一直以来都是网页制作的老大难问题，本人还偏偏对这个有所需要，谁知道哪天心血来潮写的东西能完全回避公式呢。不管怎么说，先离线把所需公式排好，再转换成图片添加到网页并逐一上传终究是很麻烦的事情，最好还是能在线生成，不论是撰写还是日后修改都会很方便，这样就需要借助额外的插件才能实现。 
 本人对插件的要求是： 
 - 代码易学，最好与LaTeX的语法相同，省却记忆时间； - 独立于浏览器和操作系统平台，浏览者无需安装任何额外插件； - 显示速度与效果兼备 
 当下个人所知的网页公式排版插件有四，其中试用过1、2、4三种： 
 1、ASCIIMathML：<a href="http://www1.chapman.edu/~jipsen/mathml/asciimath.html" rel="nofollow">http://www1.chapman.edu/~jipsen/mathml/asciimath.html</a> 
 这是一个Java Script程序，最早写成于2001年，使用方便，体积也很小，但最致命的缺点是，IE必须另装插件方可正常显示公式（不知道对于IE7如何），对于MacOS兼容性据说也是不大行。而且为了显示效果比较好，还要额外安装字体，不安装的话还会弹出对话框，实在烦人。另一个毛病是，其语法与LaTeX并不兼容，对于学习掌握来说，也是一大麻烦。 对于打算用这个插件的网友，可以先把代码文件ASCIIMathML.js上传至某一目录下，然后在网页开头加入如下代码，即可在该页使用： <code> &lt;script src="http://..../ASCIIMathML.js" type="text/java script"&gt;&lt;/script&gt; </code> 其实ASCIIMathML是<a href="http://www.w3.org/Math/" rel="nofollow">W3C Math working group</a>的成果，也是W3C组织推荐的公式排版方式。话虽如此，个人还是只用过一次，就不再理会它了。当年配置的效果可以参考<a href="http://bzhang.lamost.org/website/archives/asciimathml_diary/" rel="nofollow">过往文章</a>。 
 2、LatexRender：<a href="http://www.mayer.dial.pipex.com/latexrender.zip" rel="nofollow">http://www.mayer.dial.pipex.com/latexrender.zip</a> 
 2005年之后，2007年宇宙驿站服务器升级之前，我一直用的是它。最大的优点是语法同LaTeX，生成gif格式图片。公式的插入也不难，只消将所需代码括入<code>[tex] [/tex]</code>中，而且还可以作为快捷按钮直接整合到WordPress的编辑页面上，使用起来非常顺手。不过LatexRender的修改配置相对比较麻烦，服务器方也要安装LaTeX以供调用，这对于Linux服务器倒也不是问题。不过由于LatexRender是以PHP写成的类，仅限动态网站使用。 LatexRender的排版效果与正统LaTeX排版相同，相当漂亮，如这个公式：<img src="http://bzhang.lamost.org/website/wp-content/plugins/pictures/ccb175704c18ad5a81177f1274fcd39f.gif" alt="">。安装过程可以参考何勃亮的<a href="http://www.hebl.name/zh/archives/latex-in-web.html" rel="nofollow">介绍文章</a>。 服务器升级后，LatexRender用到的某个函数貌似出于安全考虑被禁，强行调用还会出现下列警告，只好放弃…… 
 <blockquote> 
 Warning: exec() has been disabled for security reasons in /home/bzhang/public_html/website/wp-content/plugins/class.latexrender.php on line 241 
 Warning: unlink(/home/bzhang/public_html/website/wp-content/plugins/tmp/33e9cd87a3655ba48415e94e5b732e41.aux) [function.unlink]: No such file or directory in /home/bzhang/public_html/website/wp-content/plugins/class.latexrender.php on line 289 
 ……………… 
 </blockquote> 
 3、jsMath：<a href="http://www.math.union.edu/~dpvc/jsMath/" rel="nofollow">http://www.math.union.edu/~dpvc/jsMath/</a> 
 也是一个Java Script程序包，优点也是语法同LaTeX，但在官方主页试了一下，打开速度奇慢，本人的Mozilla浏览器也非常卡，死机半天才见好转，当即就不打算用了，所以对于安装配置代码安排基本是一无所知，有兴趣的就去官网研究吧。 平心而论，jsMath生成的公式效果还是不错的，而且双击所得公式还可以自动显示代码，这个功能也是蛮实用的。只是那速度，实在是…… PS：据说为了保证效果，jsMath也需要专门字体，貌似叫什么TeX fonts。 
 4、mimetex：<a href="http://www.forkosh.dreamhost.com/mimetex.html" rel="nofollow">http://www.forkosh.dreamhost.com/mimetex.html</a> 
 从上述网站下载<a href="http://www.forkosh.com/mimetex.zip" rel="nofollow">mimetex.zip</a>，解压后将源代码用cc编译，命令如下： 
 <blockquote> 
 cc -DAA mimetex.c gifsave.c -lm -o mimetex.cgi 
 </blockquote> 
 生成的是一个cgi文件，上传后（最好放在cgi-bin文件夹下）将其权限改为755即可（至少在宇宙驿站服务器上，不修改就不能使用），无需服务器方的软件支持。使用时是用的插图代码，在cgi文件路径后添加问号及LaTeX语法的公式即可，可以生成gif图片。 来个例子：<img src="http://bzhang.lamost.org/cgi-bin/mimetex.cgi?/green/x=/frac%7b-b/pm/sqrt%7bb^2-4ac%7d%7d%7b2a%7d" alt="">。默认颜色当然是黑色，不过这个公式是绿色的，因此对应代码要做修改，如下所示：<code></code> 另外该插件还有生成公式的在线服务，地址：<a href="http://www.forkosh.dreamhost.com/mimetex.cgi" rel="nofollow">http://www.forkosh.dreamhost.com/mimetex.cgi</a> mimetex的缺点是，排版效果稍差些，毕竟利用的并非正宗LaTeX。对于角标中的大写字母尤其不敢恭维，虽然也没至于差到不能忍的地步。 有人还仿照LatexRender的用法，写过一个针对mimetex的PHP文件，不过这个东西本人没试验过，所以对于修改设置或是使用的方法并不是清楚，姑且放在<a href="http://bzhang.lamost.org/upload/mimetex.rar" rel="nofollow">这里</a>好了。 
 至于其他，还请大家补充。 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

[http_www.iyear.net_bencandy.php_fid_8_aid_61]: http://www.iyear.net/bencandy.php?fid=8&aid=61