2013年7月21日 星期日

用 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>
如圖示範:

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


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

參考資料

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

7 則留言:

留言也可用 \$...\$ 輸入 $\LaTeX$ 語法(注意:預覽畫面無法顯示)