有趣的 M4
C 库的编写 [1]

基于 ASCIIMathML.js 的 is-programmer 博客数学公式书写及显示

Garfileo posted @ 2011年5月12日 01:25 in 业余程序猿的足迹 with tags ASCIIMathML is-programmer blog , 15398 阅读

本来是为了解决实验室内部 Wiki(基于MoinMoin 引擎)的数学公式支持问题,在 MoinMoin 官方 Wiki 上看到了基于 ASCIIMathML.js 的解决方案,感觉这种方案要比使用 TeX 引擎更好一些[1]。当然,缺点也不是没有,最大的问题可能是这种方案需要网页的浏览者安装一些字体或软件。不过,由于网络上创造内容的人通常是无偿的劳动,如果浏览者觉得能够从所读内容中有所收获,他们也不至于懒到无动于衷的地步。所以,基于 ASCIIMathML.js 的数学公式支持所能带来的好处应当远大于它的缺点。

下面我根据实验室内部 Wiki 的解决方案,谈一下让 is-programmer 博客通过 ASSCIIMathML.js 获得数学公式支持的方法,希望对 is-programmer 博客的其他用户有所帮助。

部署 ASCIIMathML.js

首先,请下载 ASCIIMathML.js,然后为其打上下面的补丁:

--- /home/garfileo/Desktop/ASCIIMathML.js       2011-05-11 14:42:44.000000000 +0800
+++ ASCIIMathML.js      2011-05-11 14:42:31.000000000 +0800
@@ -44,7 +44,7 @@
 var notifyIfNoMathML = true;   // display note at top if no MathML capability
 var alertIfNoMathML = false;   // show alert box if no MathML capability
 var translateOnLoad = true;    // set to false to do call translators from js 
-var translateLaTeX = true; // false to preserve $..$, ..
+var translateLaTeX = false; // false to preserve $..$, ..
 var translateLaTeXformatting = true; // false to preserve \emph,\begin{},\end{}
 var translateASCIIMath = true; // false to preserve `..`
 var translateASCIIsvg = true;  // false to preserve agraph.., \begin{graph}..
@@ -52,7 +52,7 @@
 var displaystyle = true;      // puts limits above and below large operators
 var showasciiformulaonhover = true; // helps students learn ASCIIMath
 var decimalsign = ".";        // change to "," if you like, beware of `(1,2)`!
-var AMdelimiter1 = "`", AMescape1 = "\\\\`"; // can use other characters
+var AMdelimiter1 = "\$\$", AMescape1 = "\\\\$\\\\$"; // can use other characters
 var AMdocumentId = "wikitext" // PmWiki element containing math (default=body)
 var checkforprocessasciimathinmoodle = false; // true for systems like Moodle
 var dsvglocation = ""; // path to d.svg (blank if same as ASCIIMathML.js loc)

这个补丁对原文件作了两处修改:

  • 关闭了 LaTeX 公式的识别功能,也就是让 ASCIIMathML.js 不要对 $  公式标记  $这样的代码太敏感。如果不关闭这一功能的话,那么你在文档中书写带有 Bash 之类的 Shell 提示符的代码的时候,就要多加小心,提防它们会被 ASCIIMathML.js 误认为数学公式。
  • 将默认的反引号格式的 `公式标记` 换成了俩美元的  $$ 公式标记 $$ 。之所以如此,是因为我们在 Bash 命令中也经常要用到反引号的,例如 `pkg-config --cflags --libs glib-2.0`。

将修改后的 ASCIIMathML.js 文件上传至 is-programmer 个人 blog 的文件空间。如果你在 is-programmer 的用户名为 xxx,那么你的文件空间即为: http://xxx.is-programmer.com/admin/files

然后,在 blog 的后台管理界面中进入“插件/自定义页面 Header 与 Footer”页面,按下图这样设置和填写。

友情提示:不要忘记将上面图中所示代码中的“xxx”替换为你在 is-programmer 的用户名!

数学公式的书写及显示

当完成 ASCIIMathML.js 的部署之后,就可以在写日志之时即可使用 ASCIIMathML 语法书写数学公式了,例如:

你可能需要修改一下 CSS

is-programmer 有些主题的 CSS 中定义了全局样式,例如:

* {margin:0; padding:0;}

这种样式会导致一些数学公式在显示上不太和鞋,所以你需要前往 blog 的后台管理界面的“插件/自定义 CSS”页面,在 CSS 代码框中添加:

math * {margin:0.2em;padding:0.05em}

具体的 margin 与 padding 度量请根据自己的观感而定。


参考文档

[1] 基于MoinMoin+ConTeXt实现包含数学内容的Wiki网站

转载时,希望不要链接文中图片,另外请保留本文原始出处:http://garfileo.is-programmer.com

  • 无匹配
  • 无匹配
Avatar_small
依云 说:
2011年5月12日 11:49

我觉得还是 http://math.stackexchange.com/ 用的 wwww.mathjax.org 要好些,同时支持 HTML 和 MathML,而且(基于 HTML)的版本显示效果也好些,客户端除了一个现代浏览器其他的字体啊什么的都不用装。ASCIIMathML.js 是基于 MathML 的,因此在 IE 下需要插件,在基于 Webkit 的浏览器上也不行。

Avatar_small
Garfileo 说:
2011年5月12日 14:57

@依云: ASCIIMathML 虽然显示效果没有 mathjax 好,但是对于部署者而言,前者要比后者简单一些。

这里有一份文档比较了目前较为流行的 web 数学公式支持方案:http://www.squarecirclez.com/blog/wp-content/math-rendering-comparison.php

Yue Wang 说:
2011年5月17日 13:10

目前最好的網頁數學引擎還是http://www.mathjax.org/,不但可以生成矢量公式,對各瀏覧器也支持很好。

Avatar_small
Garfileo 说:
2011年5月17日 14:03

@Yue Wang: 前面依云同学已经介绍过这个啦,它在这个 blog 上部署不方便。

Avatar_small
依云 说:
2011年5月23日 00:34

@Garfileo: 我今天试过 MathJax 了,没有不方便啊,也是加载一个脚本,然后就可以直接写公式了。不过有个 Terms Of Service 我没细看。

Avatar_small
Garfileo 说:
2011年5月23日 11:26

@依云: 对于 IE 这样的浏览器,要在 is-p 上部署 mathjax,可能需要将数学字体的图片上传至 is-p 服务器,这就不切实际了。ASCIIMathML 对于 IE 则是直接提示用户去安装 mathplay 软件来看。

Avatar_small
依云 说:
2011年5月23日 13:13

@Garfileo: 不需要啊,那些图片也是从 MathJax 的 CDN 上获取的。

Avatar_small
Garfileo 说:
2011年5月23日 14:21

@依云: okay,我在 is-p 上试一下看看。

Avatar_small
依云 说:
2011年5月23日 16:57

@Garfileo: 我已经在我的最新博文中试过了,效果很不错~


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter