5
23
2011
51

MathJax:不错的数学公式显示引擎

本文来自依云's Blog,转载请注明。

我最初是在Mathematics - Stack Exchange这个网站上看到MathJax的使用的。当时我偶然发现StackOverflow底部还有一大堆 Stack Exchange 站点,就随便点了几个看看,然后就看到那些漂亮的数学公式,并发现它们竟然不是像维基百科那么用的图片!

不过因为我并不搞数学,一直没需求,所以一直也没尝试玩下 MathJax。前不久看到 Garfileo 的《基于 ASCIIMathML.js 的 is-programmer 博客数学公式书写及显示》一文,昨日又和 Fermat 聊起,才折腾了下。

先来测试几个公式:\(E=mc^2\),$$x_{1,2} = \frac{-b \pm \sqrt{b^2-4ac}}{2b}.$$

原来这个 \(\mathrm{e}^{- \mathrm{i} \pi} + 1 = 0\) 叫欧拉公式,今天才知道 -_-|||。

整个部署过程非常简单,加入以下脚本即可:

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

然后就是写 TeX 公式了,用\(\)括起来的是行内公式,用$$括起来的是自成一段的公式(术语叫什么我就不知道了)行间公式。

在公式上点右键还有些选项,包括选择使用 HTML+CSS 渲染还是 MathML 渲染、缩放、显示公式源码等。不过 MathML 的显示效果比较丑,而且诸如 Chrome 这些 Webkit 内核的浏览器还不支持。它会优先使用本地字体。我当然没有,于是它尝试使用网络字体。现代浏览器都会OK的,不过在火狐里,如果是本地文件(file://开头的),那么不能使用网络字体。这时候 MathJax 会使用图片代替。感觉挺智能的,而且还有各种模块和其的配置

MathJax 还支持在公式渲染之后再修改,我于是做了个简单的公式编辑器,可实时预览公式渲染的结果。有点郁闷的是,做这个网页时,相比公式处理部分,我大部分精力花在了排版上。。。另外,这个网页在 Chrome 下竟然出错了,清除缓存后才正常。以前 Chrome 也出现过这个问题,但火狐基本没有(我只在火狐3.6时代意外关机后遇到过)。


更新:

公式编辑器加了新功能,可通过 URL 的 hash 部分传递公式代码(尝试点击本段的链接),修改后 URL 也会变化,以便分享。不过发现了 Opera 浏览器的一个特性:会自动将手工输入的 URL 中的\替换成/,造成公式错误(比较点击和手工输入此链接地址的区别)。

Category: Javascript | Tags: javascript tex 数学 | Read Count: 39623
Avatar_small
zchen 说:
May 23, 2011 04:58:22 PM

chrome下出错的话, 清除一下cache就可以

Avatar_small
依云 说:
May 23, 2011 05:01:16 PM

原来如此,谢谢了!Chrome 怎么总是要清除 cache 呢。。。

lainme 说:
May 23, 2011 05:37:39 PM

呵呵,虽然不是必须,本地装了字体会更好。否则打印有问题

Avatar_small
Garfileo 说:
May 23, 2011 08:32:22 PM

$$...$$ 自然是行间公式了 :)

Avatar_small
依云 说:
May 23, 2011 09:07:55 PM

啊,竟然没想到。。。只记着 HTML 的内联元素和块级元素了。

加载 MathJax 后评论里也可以写公式呵:\( y=-\frac{b}{a}x \)~

Avatar_small
views63 说:
May 25, 2011 08:11:33 AM

这个不算真的的部署吧。去年我就想让 galeki 把 is-programmer 的公式支持改成 Mathjax,但发现兼容性并没有它标榜的那么好,而且本地部署需要附带好几十 M 的字体文件,要想使用还是有很大困难的。

lainme 说:
May 25, 2011 08:59:22 AM

完全可以精简到1.1M。MathJax自带很多格式类型支持、图片字体等等。把不需要的都删掉,包括图片字体哪些,只保留Tex->HTML-CSS的,只有1.1M而已。

MathJax比较新,但绝对是未来的趋势。以前都是JsMath,但这个已经停止开发了,连它的作者都在开发MathJax

我做过简化的,可能有些过头,但自己的博客上用得不错
http://www.boxcn.net/shared/1bgt734opj

Avatar_small
views63 说:
May 25, 2011 11:28:14 AM

谢谢,这个足够用了。
我没有否定 MathJax 的意思,只是说浏览器兼容性有待改进(至少去年就我的感觉是这样),部署有点麻烦(当然这个是我不懂去精简)

Avatar_small
依云 说:
May 25, 2011 12:28:31 PM

反正我在火狐/Chrome/Opera的最新版中试过了,没有问题。至于那些不肯更新的用户,我也拿他们没办法。

Avatar_small
依云 说:
May 25, 2011 01:18:18 PM

你那个我试过了,extensions/v1.0-warning.js 载入失败。。。

Avatar_small
galeki 说:
May 25, 2011 11:42:04 PM

看来还是可以用的,当初没有仔细研究,以为一定要把资源放在本地服务器上,之后看到硕大的字体包就放弃了。
目前插入数学公式有三四种方法了,看来要写个文章总结一下~ :)

ixwebhosting 说:
May 26, 2011 06:04:12 AM

没想到呀没想到,一直以为这种东西在网页上只能上图片呢·

lainme 说:
May 26, 2011 08:50:10 AM

被我删掉了……我没用上这个

Avatar_small
pingf 说:
May 28, 2011 11:27:08 PM

试了下,不错,chrome表现相当不错!
那个不到1mb的精简包在chrome下用不了,期待有人来改进下

没有细看,目前按下面做法个人来说可以接受
根目录保留MathJax.js以及extensions,fonts,jax这三文件夹,
fonts内部只保留otf相关字体,
这样下来1MB多一点,在chrome下普通的例子单行和行间公式都可以看到,
但是有一些动态的例子有问题

另外如果保留根目录config文件夹,动态的例子在chrome下就没问题,
不过那样好像有2MB多,config里面在保证chrome能用的情况下应该还可以精简不少东西,不过没细看.

Avatar_small
pingf 说:
May 28, 2011 11:32:26 PM

呃,又试了下我上面那样的做法在FF4下的情况,
杯具了......
不知可否通过配置文件来解决.....

不过不用FF好久了,用不了个人感觉也没啥关系....

Avatar_small
pingf 说:
May 28, 2011 11:39:41 PM

看了下网站上的说明
One solution to this problem is to install the MathJax fonts locally, so that Firefox will not have to use web-based fonts in the first place. To do that, either install the STIX fonts, or copy the fonts from MathJax/fonts/HTML-CSS/TeX/otf into your systems fonts directory and restart your browser (see the MathJax fonts help page for details).
个人感觉这个方法比较不爽.....

Avatar_small
依云 说:
May 28, 2011 11:53:03 PM

火狐怎么会杯具了呢?它应该支持 OTF 字体的啊,你看看错误控制台或者 Firebug 吧。

火狐我是一定要支持的,不仅仅是因为我喜欢她,而且我的博客的来访者中,火狐用户是最多的,Chrome 在其次(约火狐的三分之二)。

pingf 说:
May 29, 2011 08:51:04 AM

好像官网说其安全机制不让它使用web单独文件直接夹存放字体的加载,好像要安装到系统里,具体不清楚

控制台输出如下
[08:51:07.660] c.FONTDATA.FONTS.MathJax_Main[8212][5] is undefined @ file:///G:/creative/mathjax-MathJax-5a7e4d7/jax/output/HTML-CSS/imageFonts.js:15

pingf 说:
May 29, 2011 09:18:03 AM

那个字体的问题,你文中最后好像也有说啊,
所以我觉得这才是火狐杯具的地方......
竟然要图片来代替.....

Avatar_small
Garfileo 说:
May 29, 2011 10:45:40 AM

我这里 ff 不是图片,是字体。

Avatar_small
Garfileo 说:
May 29, 2011 10:46:36 AM

他文中最后说的是“本地文件”中的公式是图片。

pingf 说:
May 29, 2011 11:43:37 AM

应该是系统字体里有相应的,
如果系统字体没有相应的otf字体,会用图片代替(那个图片相关的字体目录貌似很大...),
ff貌似不支持从独立的目录里载入字体,这点反正我觉得不爽

(按官网的说法)我在把fonts里带的几个otf字体考到系统字体里ff就工作了
(XP环境)

Avatar_small
依云 说:
May 29, 2011 02:02:12 PM

什么叫“从独立的目录里载入字体”?看来你使用的 file:// 协议(本地文件)了。

使用 file:// 就是各种不爽,XHR 也不行,GreaseMonkey 默认也不启用。据说都是为了安全,所以也就让它那么样了。

pingf 说:
May 29, 2011 03:19:55 PM

恩,看来我的说法比较火星o(╯□╰)o~~o(╯□╰)o

Victor 说:
Jul 29, 2012 08:59:50 PM

http://cdn.mathjax.org/ 已经被“墙”了,在中国无法访问了。
还是换用codecogs的接口吧。

Avatar_small
依云 说:
Jul 29, 2012 09:10:41 PM

1. 我这里能够访问;
2. 不能访问就翻吧。

Victor 说:
Jul 29, 2012 11:32:33 PM

这一点小事就去翻墙,这个太没必要了。翻墙很麻烦,而且翻墙网速非常慢!那我还不如去人工阅读LaTeX代码。

Avatar_small
依云 说:
Jul 30, 2012 08:52:47 AM

对于我来说,只是在列表里加一条 URL 而已。GAE 的速度还是挺不错的,至少比直接访问我这博客快很多。

Victor 说:
Jul 31, 2012 12:33:53 AM

我觉得最好的方法就是今后让浏览器普及HTML5。
现在MathML已经被拉入到HTML5中了,成为HTML5不可分割的一部分了。相信今后随着HTML5的普及,浏览器支持MathML将是趋势。希望如此。

Victor 说:
Jul 31, 2012 12:39:57 AM

推荐用这个接口
<script type="text/javascript" src="http://latex.codecogs.com/latex.js"></script>

Avatar_small
依云 说:
Jul 31, 2012 12:43:55 AM

是 HTML5 怎么了?Webkit 这样就支持它了吗?
MathML 两个问题:直接书写和阅读不可能,显示效果不够好(能够接受这种显示效果的话我相信不会有 TeX 了)。

Avatar_small
依云 说:
Jul 31, 2012 12:44:44 AM

不喜欢使用图片的——我为节省流量禁用图片了怎么办?我看不清想放大怎么办?

Victor 说:
Jul 31, 2012 12:48:20 AM

你没看见“今后”两个字吗?我说今后应该会支持,当然,也需要好几年。

现在确实WebKit不能显示MathML;而且IE浏览器也要安装MathPlayer才能显示MathML。确实兼容性不好。

至于书写MathML的功能,现在有好多TeX公式转MathML的软件。所以这个不用担心。

Victor 说:
Jul 31, 2012 12:54:21 AM

“显示效果不够好”这个没有根据。在火狐浏览器上MathML显示得非常好。只不过书写难度太大,没有谁会去手写MathML的,MathML代码几乎都是从TeX转的

Avatar_small
依云 说:
Jul 31, 2012 01:08:44 AM

一、我用一个火狐插件写过 MathML;
二、我用 MathJax 的 MathML 和 TeX 渲染模式对比过,MathML 的相对很丑。这是没有根据么?
三、能把 MathML 转回去不?

Avatar_small
依云 说:
Jul 31, 2012 01:18:12 AM

嗯,MathJax 新加了 SVG 渲染,这个如果把 stroke="black" 去掉还是很不错了(不然太粗了),可以用来生成公式的 SVG 图像 ^_^

秋景雨 说:
Oct 11, 2012 06:14:34 PM

原来依云早就用Mathjax了,我最近才知道Mathjax和MathML。

Avatar_small
依云 说:
Oct 11, 2012 07:08:46 PM

嗯~我是看到 http://math.stackexchange.com/ 的数学公式显示得又漂亮又不是图片才去一探究竟的 ^_^

lucideye 说:
Feb 13, 2014 10:28:14 AM

你好,想要支持mathjax必须是独立博客,那么有没有公共博客提供类似服务的呢?

12 说:
Jul 01, 2014 03:22:46 PM

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<msub>
<mi>x</mi>
<mrow class="MJX-TeXAtom-ORD">
<mn>1</mn>
<mo>,</mo>
<mn>2</mn>
</mrow>
</msub>
<mo>=</mo>
<mfrac>
<mrow>
<mo>&#x2212;<!-- − --></mo>
<mi>b</mi>
<mo>&#x00B1;<!-- ± --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>&#x2212;<!-- − --></mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>b</mi>
</mrow>
</mfrac>
<mo>.</mo>
</math>

吴老师数学家教 说:
Aug 26, 2014 12:53:51 AM

数学公式的输入很成问题,看了这篇文章似乎有点能解决我的需求的节奏,期待啊!

吴老师数学家教 说:
Aug 26, 2014 12:55:59 AM

似乎这个数学公式编辑器是引入了一个js文件来排版数学公式的,那么这个文件把它放置在本地,这个主意怎么样?

Avatar_small
依云 说:
Aug 26, 2014 08:55:02 AM

挺好啊,如果适合你的需求的话。不过要注意,MathJax 由很多个文件组成,请按官方文档的指导部署。如果使用 file:// 协议访问的话,大概是不能 Ajax 的吧?那种情况下 Web 字体无法加载,于是会使用图片来显示字符。

Kevin21st 说:
Apr 24, 2015 09:27:31 AM

想请你给具体讲讲怎么用mathjax在wikipedia上输入数学公式,不胜感谢。

Kevin21st 说:
Apr 24, 2015 09:28:36 AM

我QQ是407485847

Avatar_small
依云 说:
Apr 24, 2015 12:04:07 PM

MathJax 用于显示。公式的输入依旧是 TeX。

数学辅导 说:
Oct 10, 2015 10:20:22 AM

使用数学公式编辑器引入的js文件来编排数学公式好是好,但是每次的加载速度明显慢了很多,还要进行编译,不知道有没有什么改进的办法没有????

Avatar_small
依云 说:
Oct 10, 2015 10:51:22 AM

慢了很多是因为国内到 MathJax 的访问太慢啦。你可以自己托管那些文件的。当然也可以把生成的 MathML 或者 HTML+CSS 抠下来用。

kata bijak 说:
Dec 19, 2015 04:42:41 PM

非常に役立つ情報をお寄せいただきありがとうございます


登录 *


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

| Theme: Aeros 2.0 by TheBuckmaker.com