MathJax : 在網頁中顯示數學式子

我的高中同學在大學裡教數學，經由他的介紹，有機會認識了 MathJax 這個可以讓加了數學符號的網頁在各種瀏覽器中完美顯示的 JavaScript 工具。

• http://www.mathjax.org/

玩了幾天，才感覺到它的強大。它可以自訂輸入的數學語法格式是採用 Tex、LaTex、MathML或是AsciiMath，也可以自己擇是要輸出為 HTML-CSS、SVG 或是 NativeMML 的格式，彈性非常的大。因為它是利用 JavaScript 寫的，只要支援 JavaScript ，就可以將語法嵌網頁中，在各種覽瀏器中顯示。有需要在網路文章中顯示數學式子的，MathJax 真可說是個寶啊！


看看底下的內容：

$$\frac{1}{5}+\frac{2}{5}=\frac{3}{5}$$


如果 JavaScript 有正常運作，會看到我們一般的分數加法式子，其實分數的部份我只是在本篇文章中以 Tex 的語法加了底下的內容而已(兩個錢字號暫時用全形字代替，以免被 MathJax 轉譯了)：

＄＄\frac{1}{5}+\frac{2}{5}=\frac{3}{5}＄＄

想玩一下嗎？先在 Blog 文章中，以 HTML 加入底下的語法來告訴 MathJax 要採用什麼語法來輸入，和輸出成什麼資料：

<script type="text/javascript">
window.MathJax = {
jax: ["input/TeX","output/HTML-CSS"],
extensions: ["tex2jax.js"],
tex2jax: {
inlineMath: [['＄','＄'],['\\(','\\)']]
},
};
</script>

接著繼續加入引用 MathJax 官方提供的程式連結：

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"></script>

上面的全形錢字號「＄」請自行換成半形的「$」，不然 MathJax 可能會解譯失敗。

如果是要應用在網址是「https://.....」的網頁或 Blog ，JavaScript 的「src=」後面的 MathJax 網址記得由：

http://cdn.mathjax.org/mathjax/latest/MathJax.js

改為：

https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js

不然，會因為加密內容與不加密內容混用而被瀏覽以安全問題而封鎖無效。

在打這篇文章時就遇到了這個困擾，如果用「http://cdn.mathjax.org/mathjax/latest/MathJax.js」預覽文章時，並看不到數學式子，必須暫時改用有加密的「https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js」才行。

當然，我們也可以將 MathJax 的程式全部下載回來後，將所有檔案解壓縮到目己的網頁空間再呼叫使用。

前面在設定裡頭，特別注意有「inlineMath」的那行，它告訴 MathJax ：如果是「錢字號開頭，而且是錢字號結束」的字串，或是「兩個反斜線+左括號開頭，而且是兩個反斜線+右括號結束」的字串，一律把它當成數學式子，並試著解譯它，以數學符號該有的面貌來呈現。像前面的例子中「＄＄\frac{1}{5}+\frac{2}{5}=\frac{3}{5}＄＄」即符合「錢字號」的特徵，因此，它被 MathJax 以 TeX 的語法來解譯，而 \frac{1}{5} 是 TeX 中用來表示分數五分之一的語法，變成：

$$\frac{1}{5}$$

更多的 TeX 語法，Google 一下，應該會有很多介紹文。

我試著利用 LimeJs 寫了一個數學的閃卡程式，有興趣的人可以玩一玩：

• HTML5 Math Flashcards 

程式下載：

• html5_math_flashcards.zip (@GDrive)

相關文章

• 雄 : LimeJS : 以 MathJax 來顯示數學式子