MathJaxを使う – Junk Works

Webサイトで数式を表示することができます。Octaveでアセットアロケーション計算したときに使いました。MathJaxというスクリプトを読み込むことで、Latex形式のソースをWeb上で変換表示することができるというもの。

インストール

インストールって言うのか？Javascriptなので、HTMLのヘッダで読み込めばＯＫ。WordPressならheader.phpの<head>セクション内に以下を記述。

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

公式のCDNはトラフィックの問題で配信を停止したので、ローカルに落とすのが無難かなと思いつつもCDNを利用。

ちなみにiPhoneなどのように画面サイズの小さいデバイスでレンダリングすると画面を外れる部分がうまく表示されないことがあるので、表示エリアに<div style=”overflow-x:auto;”>を指定してスクロールできるようにする必要があります。

ソースの書き出しは\begin{eqnarray}で始めます。インラインで書く場合は\(。

ソースの終了は\end{eqnarray}で終わります。インラインで書く場合は\)。

文中に\\があると、その位置で改行します。

加算減算はそのまま+記号や-記号を使います。乗算は\times、除算は\divを使うとそれぞれの記号に変換されます。

\fracに続けて{}で括った分子、分母の順に書きます。

これだけで簡単な小学校の算数の問題が書けるようになります。

\begin{eqnarray}
もんだい\\
28+47=\\
83-16=\\
13\times7=\\
84\div4=\\
\frac{5}{8}+\frac{3}{8}=
\end{eqnarray}

\begin{eqnarray}
もんだい\\
28+47=\\
83-16=\\
13\times7=\\
84\div4=\\
\frac{5}{8}+\frac{3}{8}=
\end{eqnarray}

連立方程式や式の展開など、等号位置が揃っていると美しいです。イコール記号を&で挟むと、各行の等号位置を揃えてくれます。

添え字は対象文字列に対して_{}で指定。波かっこで括られた文字列が下付き文字になる。累乗は対象文字列に対して^{}で指定。波かっこで括られた文字列が上付き文字になる。

丸かっこは()、角かっこは[]、波かっこだけは\{\}で指定。

この辺になると式の展開とか書ける。

\begin{eqnarray}y&=&x^{2}+(a_{1}+a_{2})x+a_{1}a_{2}\\
&=&(x+a_{1})(x+a_{2})
\end{eqnarray}

\begin{eqnarray}y&=&x^{2}+(a_{1}+a_{2})x+a_{1}a_{2}\\
&=&(x+a_{1})(x+a_{2})
\end{eqnarray}

エクセルとかでおなじみの表記の\sqrt{}。中身は波かっこで括ります。n乗根になると角かっこで括って\sqrt[n]{}とか。

\begin{eqnarray}\sqrt{2}, \sqrt[3]{2}
\end{eqnarray}

普通に\sin{}とか\cos{}とか\tan{}とか。

\begin{eqnarray}\sin{\frac{\pi}{2}}, \cos{\frac{\pi}{2}}, \tan{\frac{\pi}{2}}
\end{eqnarray}

読みを指定すればＯＫ。\alpha、\beta、…、\zetaって感じ。

\begin{eqnarray}\alpha, \beta, \gamma
\end{eqnarray}

これもエクセルでおなじみの表記の\sum_{i=1}^{n}。変数指定は前述の添え字、累乗と同じ表現。

\begin{eqnarray}\sum_{i=1}^{n}{x^{2}}
\end{eqnarray}

この辺になるとあまり普段使わないのでエクセルにあるのかどうか知らない。\lim_{n \to \infty}{f_{0}(x)}。

\begin{eqnarray}\lim_{n \to \infty}{f_{0}(x)}
\end{eqnarray}

これまでの例から想像つきそう。\log_{e}{10}とか。

\begin{eqnarray}\log_{e}{10}
\end{eqnarray}

このくらいあると色々数式を書けるようになるよ。