Blogger 使用 MathJax 函式庫顯示 Latex 語法

MathJax 是一個 JavaScript 的函式庫，可以讓你直接使用 LaTeX、MathML 或 AsciiMath 的語法，把數學式寫進網頁中，並且可以用右鍵剪貼數學式，各種瀏覽器都可以看，效果幾乎跟傳統 LaTeX 一樣，是一個十分強大的函式庫。

一、在 blogger 上安裝 MathJax
blogger後台主頁 -> 範本 -> 編輯HTML，在底下的 code 中尋找 <head>...</head> 標籤，在 <head> 下加入安裝 MathJax 的 code。

<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 : MathJax以 \$ ... \$ 判斷行內數學
displayMath : 用 \\[ ... \\] 判斷自成一行的數學(這裡為了顯示多加一槓)
'HTML-CSS' : 設定數學顯示大小為原本的 90%，略小於原本的設定以貼近 Blogger 初始字型大小

二、結果示範

最基本的Logo

Latex code : LaTeX

$ LaTeX $

When a≠0, there are two solutions to ax2+bx+c=0 and they are

Latex code : x = {-b \pm \sqrt{b^2-4ac} \over 2a}.

$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

An Identity of Ramanujan

Latex code :
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } }

$
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } }
$

最後，因為這些 TeX 表示法也是網頁內容的一部分，在輸入數學式子時，要小心不要輸入到一些 HTML 的關鍵字，尤其是在輸入小於符號（<）的時候，記得要在前後都留一個空白，避免瀏覽器將其誤判為 HTML 標籤。

Reference

用 MathJax 顯示數學符號－以 Blogger 為例
http://note-on-cat.blogspot.co.uk/2013/07/mathjax-blogger.html

使用 MathJax 把 LaTeX 或 MathML 數學式子放進網頁
http://www.gtwang.org/2013/06/mathjax-latex-mathml.html

[Blogger] 用 MathJax 顯示 LaTeX 數學符號
http://www.ptt.cc/bbs/Blog/M.1374443955.A.CCA.html

線上Latex 語法
http://www.codecogs.com/latex/eqneditor.php

Pages

2015年4月10日星期五