用 MathJax 顯示 LaTeX 數學符號 - 部落格
By Oscar
at 2013-07-22T05:59
at 2013-07-22T05:59
Table of Contents
分享一個稍微冷門的知識，或許有需求 :P
網誌好讀版：http://note-on-cat.blogspot.co.uk/2013/07/mathjax-blogger.html
前言
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 一致，
用 \$ ... \$ 顯示行內數學；用 \[ ... \] 顯示自成一行的數學。
另外 'HTML-CSS': scale: 90 設定數學顯示大小為原本的 90%，
略小於原本的設定貼近 Blogger 初始字型大小，這點依照各個範本而定。
這樣就大功告成了。接下來可以在自己的文章上測試語法，
例如要顯示 LATEX 只需要在文章中輸入 $\LaTeX$ 若設定正確地
應該就能看到斜體的 LaTeX。
--
網誌好讀版：http://note-on-cat.blogspot.co.uk/2013/07/mathjax-blogger.html
前言
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 一致，
用 \$ ... \$ 顯示行內數學；用 \[ ... \] 顯示自成一行的數學。
另外 'HTML-CSS': scale: 90 設定數學顯示大小為原本的 90%，
略小於原本的設定貼近 Blogger 初始字型大小，這點依照各個範本而定。
這樣就大功告成了。接下來可以在自己的文章上測試語法，
例如要顯示 LATEX 只需要在文章中輸入 $\LaTeX$ 若設定正確地
應該就能看到斜體的 LaTeX。
--
Tags:
部落格
All Comments
By Xanthe
at 2013-07-26T20:41
at 2013-07-26T20:41
By Xanthe
at 2013-07-30T14:41
at 2013-07-30T14:41
Related Posts
將照片放到大尺寸後的顯示問題
By Hedda
at 2013-07-22T03:20
at 2013-07-22T03:20
Re: PTT Blog板友簽到簿(PTTBlogRolling!)
By Queena
at 2013-07-21T18:21
at 2013-07-21T18:21
請問如何將網誌設定隱藏
By Quanna
at 2013-07-20T17:22
at 2013-07-20T17:22
固定網址與pager builder seo
By Madame
at 2013-07-20T00:32
at 2013-07-20T00:32
文章內的圖片
By John
at 2013-07-19T18:14
at 2013-07-19T18:14