三明交通建设集团网站,新网站一般多久收录,网站策划建设方法,wordpress模板自媒体笔者最近的博文有不少数学相关内容#xff0c;发现利用一些网上服务、jQuery和CSS#xff0c;可以更轻松地在博客里使用语法排版方程式。是基于的排版系统。而就是美国著明计算机教授高德纳(Donald E. Knuth)#xff0c;为了编写他的巨著《计算机程序设计艺术(The Art of Co… 笔者最近的博文有不少数学相关内容发现利用一些网上服务、jQuery和CSS可以更轻松地在博客里使用语法排版方程式。是基于的排版系统。而就是美国著明计算机教授高德纳(Donald E. Knuth)为了编写他的巨著《计算机程序设计艺术(The Art of Computer Programming)》而设计的系统对于数学公式的排版支援十分强大。 线上LaTeX数学公式编辑器 笔者最初使用这个线上LaTeX数学公式编辑器输入公式时就会产生一个影像档案(如GIF、PNG、SVG)把该HTML代码复制到博客即可。例如: view sourceprint? 1\sqrt{a^2b^2} 选择输出为HTML该编辑器就会产生以下的HTML代码: view sourceprint? 1img srchttp://latex.codecogs.com/gif.latex?\sqrt{a^2b^2} title\sqrt{a^2b^2} / 这HTML码就能显示该公式 这个方法已算不错了但还有3个小问题: 每次修改都要从IMG找到代码复制过去编辑器再复制过来比较麻烦。 希望像一般技术书籍为公式加入编号方便评论和沟通时使用。 万一想改变生成影象的服务、输出格式、大小设置等就要修改每个地方。于是笔者想到使用jQuery把放置代码的特定的HTML标记自动变换成IMG标记并使用CSS作编号。 jQuery作转换 笔者最近才得知jQuery是百分百新手请各位不吝赐教。 现时希望支持两种数学公式一种是文字中的内联(inline)公式另一种是整行独占的公式。笔者分別采用span和div标记并共同使用math作为class: view sourceprint? 1span classmathlatex code/span 2div classmathlatex 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? 1body { counter-reset:section 0; } 2div.entry h2:before { counter-increment:section; content: counter(section) . } 3div.entry h2 { counter-reset:equation } 4div.math:before { counter-increment:equation; content: ( counter(section) . counter(equation) ); float:right; } 5div.math img { display: block; margin-left:auto; margin-right:auto; } 6span.math img { border:none; vertical-align:middle; } 测试1 view sourceprint? 1p牛顿力学第三定理是/p 2div classmath\vec{F}m \frac{d \vec{v}}{dt} \vec{v}\frac{dm}{dt}/div 3p当中span classmath\frac{d \vec{v}}{dt}/span是速度相对于时间的改变。 /p 4p爱因斯坦的能质守衡公式是/p 5div classmathEmc^2/div 牛顿力学第三定理是 当中是速度相对于时间的改变。 爱因斯坦的能质守衡公式是 (可看到方程计数器的递增使编号由(4.1)变成(4.2)。) 测试2 view sourceprint? 1p计算两个矢量span classmath\mathbf{A}/span和span classmath\mathbf{B}/span之间的夹角span classmath\theta/span可用/p 2div classmath\cos \theta \frac{\mathbf{A} \cdot \mathbf{B}}{\left \| \mathbf{A} \right\| \cdot \left \| \mathbf{B} \right\|}/div 计算两个矢量和之间的夹角可用 (可看到h2标记把计方程数器重置使编号变成(5.1)。) 结语 对于简单的公式笔者现在可以直接使用HTML编辑器输入代码修改也容易。透过CSS把显示的格式和内容分离将来改变皮肤、或影象生成服务等也变得容易。 一个缺点是读者透过RSS等方式只能看见源码。 读者可于这里下载代码。 关于的进阶公式输入方法可参考中文维基:数学公式 来源http://www.cnblogs.com/miloyip/archive/2010/04/26/1720877.html转载于:https://www.cnblogs.com/guangrou/archive/2010/10/14/1851440.html
