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

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

线上LaTeX数学公式编辑器

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

view sourceprint?

`1`	`\sqrt{a^2+b^2}`

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

view sourceprint?

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

这HTML码就能显示该公式

$\sqrt{a^2+b^2}$

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

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

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

jQuery作转换

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

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

view sourceprint?

`1`	`<span` `class="math">latex code</span>`

`2`	`<div` `class="math">latex code</div>`

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

view sourceprint?

`1`	`// math.js`

`2`	`$(document).ready(function() {`

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

4 });

CSS排版

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

view sourceprint?

`1`	`body {` `counter-reset:section` `0; }`

`2`	`div.entry h2:before {` `counter-increment:section;` `content:` `counter(section)` `". "` `}`

`3`	`div.entry h2` `{` `counter-reset:equation }`

`4`	`div.math:before {` `counter-increment:equation;` `content:` `"("` `counter(section)` `"."` `counter(equation)` `")";` `float:right; }`

`5`	`div.math img {` `display:` `block;` `margin-left:auto;` `margin-right:auto; }`

`6`	`span.math img {` `border:none;` `vertical-align:middle; }`

测试1

view sourceprint?

`1`	`<p>牛顿力学第三定理是</p>`

`2`	`<div` `class="math">\vec{F}=m \frac{d \vec{v}}{dt} + \vec{v}\frac{dm}{dt}</div>`

`3`	`<p>当中<span` `class="math">\frac{d \vec{v}}{dt}</span>是速度相对于时间的改变。 </p>`

`4`	`<p>爱因斯坦的能质守衡公式是</p>`

`5`	`<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

view sourceprint?

`1`	`<p>计算两个矢量<span` `class="math">\mathbf{A}</span>和<span` `class="math">\mathbf{B}</span>之间的夹角<span` `class="math">\theta</span>，可用</p>`

`2`	`<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$ 的进阶公式输入方法，可参考中文维基:数学公式

来源：http://www.cnblogs.com/miloyip/archive/2010/04/26/1720877.html

转载于:https://www.cnblogs.com/guangrou/archive/2010/10/14/1851440.html