用 MathJax 顯示數學符號－以 Blogger 為例

前言

MathJax 是近年來網頁技術中，用來顯示數學符號最熱門的方法之一。以往的解決方法如 MathML 需要瀏覽器的支援，可能因為數學排版複雜又不熱門，主流瀏覽器中只有 Firefox 支援的最完整，其它如 Chrome、Safari 或是 IE 排版結果遠遜於 $\TeX$ 或是 $\LaTeX$ 的品質；另一種方式則是直接顯示成圖片，缺點是與內文難以相配，能夠顯示但不夠優美。而如今 MathJax 的優點，在於只需要支援 JavaScript 的瀏覽器幾乎都可以正確而且漂亮地顯示（詳情見 MathJax 網頁），支援 $\LaTeX$ 的語法，幾乎就像是直接使用 $\LaTeX$ 一樣。

但因為 MathJax 是一支 JavaScript 程式，必須在網頁讀取完成後再解讀。使用上不如 MathML 只要輸入 MathML 的語法就能顯示，需要在網頁中「安裝」MathJax，並不能直接使用。目前網站支援 MathJax 大多為數學相關的網站，像是討論研究所等級的數學問題的 MathOverflow 或是維基百科 Wikipedia （需個人賬號登入設定）。而各主流網誌平台中，多數仍需要稍微修改範本（template）的原始檔才能使用，有些平台如 Wordpress.com 雖然提供各種不同範本的，但不能修改原始檔就沒辦法了。

幸好，Google 旗下的 Blogger 提供了範本的原始檔修改，幾個簡單的步驟就能讓 Blogger 使用 MathJax。其他的平台也類似如法炮製即可：

安裝步驟

首先，連結到 Blogger 的網誌主頁，選擇範本 / 編輯 HTML：

在底下的原始檔中尋找段落由 <head> 開頭以 </head> 為結尾的段落如下

在 <head> 下加入底下的原始碼：

<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML' type='text/javascript'>
    MathJax.Hub.Config({  
     TeX: { equationNumbers: { autoNumber: "AMS" } },  
     tex2jax: {  
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],  
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],  
      processEscapes: true },  
     'HTML-CSS': { scale: 90 },  
     displayIndent: '2em'  
    });  
</script>

如圖示範：

其中

兩行指令 inlineMath 跟 displayMath 分別設定 MathJax 要用什麼樣的文字當作數學段落的開始跟結尾，這裡用的習慣與 $\LaTeX$ 一致，用 \$ ... \$ 顯示行內數學；用 \[ ... \] 顯示自成一行的數學。
processEscapes 設定使得能用 \$ 符號來輸入 $ 符號，不然會被當成是數學段落的開始或結束；
另外 'HTML-CSS': scale: 90 設定數學顯示大小為原本的 90%，略小於原本的設定貼近 Blogger 初始字型大小，這點依照各個範本而定。

這樣就大功告成了。接下來可以在自己的文章上測試語法，例如要顯示 $\LaTeX$ 只需要在文章中輸入 $\LaTeX$ 若設定正確地應該就能看到斜體的 LaTeX。

參考資料

MathJax,Loading and Configuring MathJax, http://docs.mathjax.org/en/latest/configuration.html

Simple Cat. - 貓論筆記

2013年7月21日星期日