2014年1月21日 星期二

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

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


玩了幾天,才感覺到它的強大。它可以自訂輸入的數學語法格式是採用 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 寫了一個數學的閃卡程式,有興趣的人可以玩一玩:


程式下載:



相關文章



6 則留言:

  1. 網路上有很多在google小工具設定後就能使用的經驗分享,但在下試了都失敗,只有您的作法成功。

    特別想請問的是,假如在下使用的是google bloger,是否有辦法只要一次的設定,之後在文章編輯器時就能直接用Mathjax的語法撰寫呢?

    目前在下使用您的方法,就是每次打文章前,都要到文章的htlm貼上您所提供的code才行,希望能夠更簡單些,期待能獲得您的解惑,感謝您!!

    回覆刪除
    回覆
    1. 您好:
      Blogger 可以自訂範本(template),將語法加入範本的 HTML 語法中應該可以讓每篇文章都能使用,缺點是即使沒有使用的到 MathJax 也會載入 JavaScript 程式,應該會拖顯示頁面的速度。

      刪除
    2. 謝謝您!已成功解決^ ^

      刪除
  2. 不好意思,我想用Blogger 寫數學式,但用了很多方法都失敗,包誇您提供的做法,實在不知道哪裡出了問題。
    可以請問會是因為版本瀏覽器版本有差嗎還是還有其他可能?

    回覆刪除
    回覆
    1. 您好:
      是不是瀏覽器的問題, 您自己試了便可以知道答案囉~~
      個人在 Chrome 和 Firefox 中是可以成功的,IE 的話,您就別浪費時間了。

      刪除

 
© 2009. Design by Pocket