MH の資源筆記: 用MathJax在網頁或部落格顯示數學方程式

以往在編寫含有數學式的文章時，都需要將先在 MathType、Word 或 LaTeX 編輯好數學式再截圖並放到圖片空間才能貼在網頁或部落格中使用，若要修改就必須再截圖一次，使用上非常不方便

現在有了 MathJax 就完全解決這個問題(手機可能無法正常顯示)，做法很簡單，以 Blogger 為例，請先到後台的「主題」→「編輯HTML」，在 <head> 後面貼上

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">
</script>

其他解說可參考官網 Simple integration

使用方式為在想要表式數學的地方先加上以下符號，中間的 ... 插入想要的數學式

$ ... $ 或 \( ... \)

或者用以下方法顯示獨立一行的方程式

$$ ... $$ 或 \{ ... \}

以下為測試結果
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

若要替方程式加上編號的話，可參考 MathJax in Blogger 這篇文章的方式

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>   
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

使用方式如下，eq_name 請自行修改成想要表示該方程式的名字

\begin{equation}\label{eq:eq_name}
...
\end{equation}

範例
\begin{equation}\label{eq:eq_name}
E=mc^2
\end{equation}

而引用方式則為

(\ref{eq:eq_name})

範例
引用 (\ref{eq:eq_name}) 式子

不過如果文章裡常有程式碼或其他特殊符號時，還滿容易會出現 Undefined control sequence，主要是因為＄符號的關係，改成全形就解決了，使用前請自行檢查一下

MH の資源筆記

網頁

搜尋此網誌

用MathJax在網頁或部落格顯示數學方程式

3 則留言: