在博客里轻松使用LaTeX数学公式
2010-04-26 01:32 Milo Yip 阅读(23432) 评论(25) 编辑 收藏 举报笔者最近的博文有不少数学相关内容,发现利用一些网上服务、jQuery和CSS,可以更轻松地在博客里使用语法排版方程式。
是基于
的排版系统。而
就是美国著明计算机教授高德纳(Donald E. Knuth),为了编写他的巨著《计算机程序设计艺术(The Art of Computer Programming)》而设计的系统,对于数学公式的排版支援十分强大。
线上LaTeX数学公式编辑器
笔者最初使用这个线上LaTeX数学公式编辑器,输入公式时,就会产生一个影像档案(如GIF、PNG、SVG),把该HTML代码复制到博客即可。例如:
1 | \sqrt{a^2+b^2} |
选择输出为HTML,该编辑器就会产生以下的HTML代码:
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:
1 2 | < span class="math">latex code</ span > < div class="math">latex code</ div > |
之后,就使用以下JavaScript代码,在网页载入后做这个转换:
1 2 3 4 | // 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定制页面风格"):
1 2 3 4 5 6 | body { counter-reset :section 0 ; } div.entry h 2: before { counter-increment :section; content : counter (section) ". " } div.entry h 2 { 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
1 2 3 4 5 | < 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 > |
牛顿力学第三定理是
当中是速度相对于时间的改变。
爱因斯坦的能质守衡公式是
(可看到方程计数器的递增,使编号由(4.1)变成(4.2)。)
测试2
1 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 > |
计算两个矢量和
之间的夹角
,可用
(可看到h2标记把计方程数器重置,使编号变成(5.1)。)
结语
对于简单的公式,笔者现在可以直接使用HTML编辑器输入代码,修改也容易。透过CSS把显示的格式和内容分离,将来改变皮肤、或
影象生成服务等也变得容易。
一个缺点是,读者透过RSS等方式,只能看见源码。
读者可于这里下载代码。
关于的进阶公式输入方法,可参考中文维基:数学公式
祝写博愉快!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验