www.cnblogs.com

在博客里轻松使用LaTeX数学公式

2010-04-26 01:32 by Milo Yip, ... 阅读, ... 评论, 收藏, 编辑

笔者最近的博文有不少数学相关内容,发现利用一些网上服务、jQuery和CSS,可以更轻松地在博客里使用\LaTeX语法排版方程式。\LaTeX是基于\TeX的排版系统。而\TeX就是美国著明计算机教授高德纳(Donald E. Knuth),为了编写他的巨著《计算机程序设计艺术(The Art of Computer Programming)》而设计的系统,对于数学公式的排版支援十分强大。

线上LaTeX数学公式编辑器

笔者最初使用这个线上LaTeX数学公式编辑器,输入公式时,就会产生一个影像档案(如GIF、PNG、SVG),把该HTML代码复制到博客即可。例如:

\sqrt{a^2+b^2}

选择输出为HTML,该编辑器就会产生以下的HTML代码:

<img src="http://latex.codecogs.com/gif.latex?\sqrt{a^2+b^2}" title="\sqrt{a^2+b^2}" />

这HTML码就能显示该公式

这个方法已算不错了,但还有3个小问题:

  1. 每次修改,都要从IMG找到\LaTeX代码,复制过去编辑器,再复制过来,比较麻烦。
  2. 希望像一般技术书籍,为公式加入编号,方便评论和沟通时使用。
  3. 万一想改变生成影象的服务、输出格式、大小设置等,就要修改每个地方。

于是,笔者想到使用jQuery,把放置\LaTeX代码的特定的HTML标记,自动变换成IMG标记,并使用CSS作编号。

jQuery作转换

笔者最近才得知jQuery,是百分百新手,请各位不吝赐教。

现时希望支持两种数学公式,一种是文字中的内联(inline)公式,另一种是整行独占的公式。笔者分別采用span和div标记,并共同使用math作为class:

<span class="math">latex code</span>
<div class="math">latex code</div>

之后,就使用以下JavaScript代码,在网页载入后做这个转换:

// math.js
$(document).ready(function() {
    $(".math").each(function(i) { $(this).html("<img src=\"http://latex.codecogs.com/png.latex?" + this.innerHTML + "\"/>"); });
});

CSS排版

最后,利用CSS2计数器(CSS2 counter),为非内联的公式加入编号。 编号的方式各有喜好,笔者博客里使用采用(节.公式编号)格式,笔者定义"节"(section)是以<h2>为层级,公式编号则是在一个章节里从1开始。 在博客园中,博客内文是在div.entry之内,以下CSS代码就能为公式加上编号和置中(可加进博客"修改设置 -> 通过CSS定制页面风格"):

body { counter-reset:section 0; }
div.entry h2:before { counter-increment:section; content: counter(section) ". " }
div.entry h2 { counter-reset:equation }
div.math:before { counter-increment:equation; content: "(" counter(section) "." counter(equation) ")"; float:right; }
div.math img { display: block; margin-left:auto; margin-right:auto; }
span.math img { border:none; vertical-align:middle; }

测试1

<p>牛顿力学第三定理是</p>
<div class="math">\vec{F}=m \frac{d \vec{v}}{dt} + \vec{v}\frac{dm}{dt}</div>
<p>当中<span class="math">\frac{d \vec{v}}{dt}</span>是速度相对于时间的改变。 </p>
<p>爱因斯坦的能质守衡公式是</p>
<div class="math">E=mc^2</div> 

牛顿力学第三定理是

\vec{F}=m \frac{d \vec{v}}{dt} + \vec{v}\frac{dm}{dt}

当中\frac{d \vec{v}}{dt}是速度相对于时间的改变。

爱因斯坦的能质守衡公式是

E=mc^2

(可看到方程计数器的递增,使编号由(4.1)变成(4.2)。)

测试2

<p>计算两个矢量<span class="math">\mathbf{A}</span>和<span class="math">\mathbf{B}</span>之间的夹角<span class="math">\theta</span>,可用</p>
<div class="math">\cos \theta = \frac{\mathbf{A} \cdot \mathbf{B}}{\left \| \mathbf{A} \right\| \cdot \left \| \mathbf{B} \right\|}</div>

计算两个矢量\mathbf{A}\mathbf{B}之间的夹角\theta,可用

\cos \theta = \frac{\mathbf{A} \cdot \mathbf{B}}{\left \| \mathbf{A} \right\| \cdot \left \| \mathbf{B} \right\|}

(可看到h2标记把计方程数器重置,使编号变成(5.1)。)

结语

对于简单的公式,笔者现在可以直接使用HTML编辑器输入\LaTeX代码,修改也容易。透过CSS把显示的格式和内容分离,将来改变皮肤、或\LaTeX影象生成服务等也变得容易。

一个缺点是,读者透过RSS等方式,只能看见\LaTeX源码。

读者可于这里下载代码

关于\LaTeX的进阶公式输入方法,可参考中文维基:数学公式

祝写博愉快!