?

筆者最近的博文有不少數學相關內容，發現利用一些網上服務、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 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>

牛頓力學第三定理是

當中是速度相對于時間的改變。

愛因斯坦的能質守衡公式是

(可看到方程計數器的遞增，使編號由(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等方式，只能看見源碼。

讀者可于這里下載代碼。

關于的進階公式輸入方法，可參考中文維基:數學公式

?

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

轉載于:https://www.cnblogs.com/guangrou/archive/2010/10/14/1851440.html

總結

以上是生活随笔為你收集整理的在博客里轻松使用LaTeX 数学公式[转]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。