MathJax 這個 JavaScript 工具可以讓你直接使用 LaTeX、MathML 或 AsciiMath 的語法把數學式子寫進網頁中,它會自動幫你排版並產生 HTML、SVG 或是 MathML 的方程式,讓各種瀏覽器都可以看,效果幾乎跟傳統上的 LaTeX 一樣,非常厲害。
傳統上如果要在網頁上顯示專業排版的數學式子,大概都只能靠 LaTeX 排版之後,透過一些編譯工具把 LaTeX 轉成圖片檔,再放進網頁中,雖然有很多線上編譯 LaTeX 的工具可以使用,但是最終還是需要自己內崁圖檔,並不是很方便。
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
A Cross Product Formula:
$$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
\end{vmatrix}$$
An Identity of Ramanujan:
$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } }$$
這些都是將原始的 LaTeX 直接寫在網頁中的,在這些數學式子上點右鍵,還可以直接看到該式子的原始 LaTeX 程式碼:
選擇「TeX Commands」打開之後,就會看到程式碼:
如果想使用 MathJax 的話,主要有有幾種方式,你可以直接使用 cdn.mathjax.org
上面提供的連結,或是將 MathJax 的 JavaScript 檔直接下載下來,放在自己的網頁伺服器中使用,或是放在自己的電腦中使用(在沒有連上網路的時候)。以下是各種情況的教學。
要使用 MathJax 最直接的方式就是直接使用 CDN 所提供的服務,只要在自己的網頁加入 MathJax 函式庫的連結就可以直接使用,以下是設定步驟。
首先在網頁的 header 部分加入載入 MathJax JavaScript 的程式碼,也就是在 <head>
與 </head>
之間加入:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
而這段 JavaScript 也可以加在 <body>
之中,但一般來說都會把他放在 <head>
的部份,除非不想更動 <head>
的時候,才會改放在 <body>
之中(下面會介紹這樣的狀況)。
引入這段 MathJax 的 JavaScript 程式碼之後,它會自動從分散式的伺服器上載入最新版的 MathJax,然後使用預設的設定值將網頁中的 TeX 或 MathML 語法轉換為 MathML(在瀏覽器支援的情況下)或 HTML 與 CSS 來顯示數學式子,這是完全沒有做任何設定時,預設會執行的動作,這對於大部份的使用者而言,應該是很夠用了,而如果需要的也可以自己加入額外的參數設定,設定方式可參考 Loading and Configuring MathJax。
上面這個方式是透過一般的 HTTP 連線從 cdn.mathjax.org
抓取 JavaScript 程式碼,這個方式有潛在的安全性風險,有可能會遭受 man in the middle 的攻擊。如果想避免這個風險,則可以透過 HTTPS 加密的連線來使用 MathJax CDN 伺服器,而使用方式只是簡單的將 src
的內容改一下而已:
<script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
在一般的狀況下建議是以上述的 CDN 方式來使用 MathJax,但你也可以直接把 MathJax 的 JavaScript 函式庫直接安裝在自己的伺服器上,或是放在本機使用。
若要把 MathJax 安裝在自己的機器上使用,基本上有下面幾個步驟:
MathJax 函式庫可以從 MathJax 的官方網站直接下載,下載下來的檔案大概會是一個類似 mathjax-MathJax-v2.1-X-XXXXXXXX.zip
的壓縮檔,這個壓縮檔中包含了 MathJax 的原始程式碼與網頁字型,其中已經包含所有你所需要的東西。(舊版的 MathJax 會有些差異,若在 1.0 版以前,網頁字型與程式碼是分開的)
將下載下來的壓縮黨解壓縮之後,在自己的網頁伺服器上選擇一個地方將 MathJax 資料夾放上去,當然這個放置的位置要可以被其他網頁引入的才行,例如放在網頁的最上層目錄中的話,則在伺服器上的網頁要引入 MathJax 的時候,URL 位址就寫成 /MathJax/MathJax.js
。
上面這個方式是最簡單的使用方法,然而還有其他更好的方式可以讓你自己伺服器中的 MathJax 版本自動更新,例如使用 Git 或是 Subversion 進行自動更新,這部分可參考 Installing MathJax 與 Installing MathJax via SVN。
當安裝好 MathJax 之後,你可以使用 MathJax/test
目錄中的檔案進行測試,如果你是將 MathJax 放置在伺服器中,則可開啓瀏覽器瀏覽其中的 index.html
,瀏覽的時候網址要輸入類似 http://192.168.0.1/MathJax/test/index.html
類似這樣以 http://
開頭的網址,不要用 file://
的,如果安裝正確,應該會看到正常的畫面,如果有問題的話,就要檢查在檔案放置的過程是否有出錯,或是檔案權限是否有設定正確等,另外亦可檢查伺服器的記錄檔看看是否有出現什麼問題。
在預設的狀況下,加入 MathJax 的網頁會載入 config/TeX-AMS-MML_HTMLorMML.js
,而這個 JavaScript 會自動載入一般最常用的 MathJax 模組,讓網頁可以呈現以 TeX、LaTeX 或 MathML 表示的數學式子,如果瀏覽器支援的話,他會產生 MathML 的格式,否則就會使用傳統的 HTML 加上 CSS 的方式來顯示。
在 MathJax 中有許多已經預先寫好的設定組態,你可以直接使用,或是使用 config/default.js
這個預設值,再加以修改,詳細說明可參考 Common Configurations 與 Configuration Options。
若要將自己安裝的 MathJax 連結至網頁中,做法跟上面使用 CDN 的方式很像,在在 <head>
與 </head>
之間加入下面這段程式碼:
<script type="text/javascript" src="path-to-MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
其中 path-to-MathJax
要替換成自己的 MathJax 安裝路徑,如果你是將 MathJax 安裝在網頁的最上層目錄中的話,就會是這樣:
<script type="text/javascript" src="/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
如果想在網頁中使用加入可以讓 MathJax 處理的數學式子,可以使用 TeX、LaTeX、MathML 或是 AsciiMath 這幾種方式,甚至將這幾種表示方式在網頁中混合使用也可以,上面範例的設定是設定讓 MathJax 處理 TeX 與 MathML 兩種,如果要使用其他的方式,你必須先設定好要使用的方式,以下介紹各種不同的方式如何設定。
在 TeX 與 LaTeX 中的數學式子是使用其專用的數學分隔符號(math delimiters)來與一般文字區隔的,只要是被數學分隔符號包起來的部分就會被 MathJax 視為是一個數學式子,然後它就會對這部分進行數學的排版。
一般數學式子分為兩種,一種是出現在文章中間的 in-line 數學式子,一種是獨立於一般文字,自己一行的 displayed 數學式子,如果要顯示 in-line 數學式子的話,可以使用 \(...\)
,而 displayed 數學式子則可使用 $$...$$
與 \[...\]
,這裡要注意一下,一般在 TeX 與 LaTeX 中常用的 $...$
這種 in-line 方式,在 MathJax 中不支援,原因是一般的文字出現錢字號($
)的機會很高,如果支援這樣的表示法常常會造成一些不是數學式子的文字被 MathJax 誤判為數學式子,但如果你還是很想使用這個語法的話,也可以更改設定檔,啟用這樣的語法:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); </script> <script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
下面這個是一個完整的 TeX 範例:
<!DOCTYPE html> <html> <head> <title>MathJax TeX Test Page</title> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> </head> <body> When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ </body> </html>
因為這個 TeX 表示法也是網頁內容的一部分,在輸入數學式子時,要小心不要輸入到一些 HTML 的關鍵字,尤其是在輸入小於符號(<)的時候,記得要在前後都留一個空白,避免瀏覽器將其誤判為 HTML 標籤,詳細說明可參考 TeX and LaTeX support。
若你是在部落格、Wiki 或是類似的 CMS(content management system)的系統中使用 MathJax,這些環境中所使用的語法可能會與 MathJax 衝突,如果發生類似的問題,可以參考 TeX and LaTeX support。
在使用 TeX-AMS-MML_HTMLorMML
這個設定時,有一些用於 TeX 處理的擴充功能會自動載入,包含:
TeX/AMSmath.js
:定義一些 AMS 的數學環境與巨集(macros)。TeX/AMSsymbols.js
:定義一些 msam10 與 msbm10 字型中的符號。TeX/noErrors.js
:在無法正常顯示數學式子時,顯示原始的 TeX 程式碼。TeX/noUndefined.js
:當碰到未定義的巨集時,顯示紅色的巨集名稱,避免產生錯誤訊息。其餘的擴充功能在需要的時候,也會自動載入,關於其餘的擴充功能可以參考 TeX and LaTeX support。
如果是想以 MathML 來表示數學式子,你可以使用標準的 <math>
標籤,<math display="block">
表示 displayed 的數學式子,而 <math display="inline">
或是 <math>
則代表 in-line 的數學式子。
在使用 <math>
標籤時,建議加入 xmlns="http://www.w3.org/1998/Math/MathML"
這個屬性,這樣可以增加其相容性。
以下是完整的範例:
<!DOCTYPE html> <html> <head> <title>MathJax MathML Test Page</title> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> </head> <body> <p> When <math xmlns="http://www.w3.org/1998/Math/MathML"> <mi>a</mi><mo>≠</mo><mn>0</mn> </math>, there are two solutions to <math xmlns="http://www.w3.org/1998/Math/MathML"> <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mi>b</mi><mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> </math> and they are <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mi>x</mi> <mo>=</mo> <mrow> <mfrac> <mrow> <mo>−</mo> <mi>b</mi> <mo>±</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mo>−</mo> <mn>4</mn><mi>a</mi><mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn><mi>a</mi> </mrow> </mfrac> </mrow> <mtext>.</mtext> </math> </p> </body> </html>
在一般的 HTML 網頁中如果使用 MathML 的表示法,所有的數學元素都要以成對的標籤來表示,不可以使用 self-closing 的標籤,例如:
<mspace width="5pt"></mspace>
就不可以使用 <mspace width="5pt" />
來取代,如果你使用這樣的 self-closing 標籤的話,有一些瀏覽器會無法建立正確的樹狀結構,導致 MathJax 接收到的數學式子結構錯誤,最後也就無法顯示正確的數學式子。由於這樣的問題是因為瀏覽器的解析錯誤造成的,所以 MathJax 也無能為力,唯一的解決方式就是按照這個規則來使用它。
在 MathJax 中負責處理 MathML 的擴充功能是 mml2jax,而這個功能只有一些少量的參數可以設定,設定時可以參考 config/default.js
,或是查閱 mml2jax configuration options 與 MathML。
MathJax 2.0 版之後加入了一個新的數學式子表示方式:AsciiMath,其語法是將數學式子以反引號包起來,就像這樣:`...`
。
下面是一個完整的範例:
<!DOCTYPE html> <html> <head> <title>MathJax AsciiMath Test Page</title> <script type="text/javascript" src="../MathJax.js?config=AM_HTMLorMML-full"></script> </head> <body> <p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are</p> <p style="text-align:center"> `x = (-b +- sqrt(b^2-4ac))/(2a) .` </p> </body> </html>
處理 AsciiMath 語法的擴充功能是 asciimath2jax,設定時可以參考 config/default.js
,或是查閱 asciimath2jax configuration options 與 AsciiMath support。