您的位置：首页 > 其它

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

2010-10-14 16:09 585 查看
笔者最近的博文有不少数学相关内容，发现利用一些网上服务、jQuery和CSS，可以更轻松地在博客里使用

语法排版方程式。

是基于

的排版系统。而

就是美国著明计算机教授高德纳(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码就能显示该公式



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

每次修改，都要从IMG找到

代码，复制过去编辑器，再复制过来，比较麻烦。

希望像一般技术书籍，为公式加入编号，方便评论和沟通时使用。

万一想改变生成影象的服务、输出格式、大小设置等，就要修改每个地方。

于是，笔者想到使用jQuery，把放置

代码的特定的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 h
2:
before {
counter-increment
:section;
content
:
counter
(section)
". "
 
}
3
div.entry h
2
 
{
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
>
牛顿力学第三定理是



当中

是速度相对于时间的改变。

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



(可看到方程计数器的递增，使编号由(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
>
计算两个矢量

和

之间的夹角

，可用



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

结语
对于简单的公式，笔者现在可以直接使用HTML编辑器输入

代码，修改也容易。透过CSS把显示的格式和内容分离，将来改变皮肤、或

影象生成服务等也变得容易。

一个缺点是，读者透过RSS等方式，只能看见

源码。

读者可于这里下载代码。

关于

的进阶公式输入方法，可参考中文维基:数学公式

来源：/article/4780151.html
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航