mathjaxの使い方
1.mathjaxとは
mathjax
とは、web上に数式を書くときに非常に重宝するツールである。無料で簡単にhtml内にTeXくらいきれいな数式を書くことができる。このサイトもすべて数式はmathjaxによって表示させている。
このツールはjavascriptによって動作する。導入の仕方は簡単で、htmlファイルのheadタグ内に、
<script type=\"text/javascript\" src=\"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML\"></script>
というタグを入れるだけでよい。ブログに数式を入れるときにも使える。htmlのテンプレートのheadタグ内に上を記述すればよい。ちなみにjavascriptによって表示させているので、1ページ内にあまりにも多くの数式を入れると表示に時間がかかる。
2.実際に使ってみる
TeXとは違い￥[￥]または￥(￥)によって囲むとその中が数式として認識され、javascriptによってきれいな数式となって表示される。￥[￥]ではhtml内にブロック要素として表示され、￥(￥)ではインライン表示される。あとの文法はほとんどTeXと同じなんじゃないだろうか。多分。僕はTeX使ったことがないのでよくしらないが。(￥マークは便宜的に全角にしている。半角だと数式として認識してしまうから。)
例えば、
￥[
dU = -p~\left\{\left(\frac {\partial V}{\partial T}\right)_p dT + \left(\frac {\partial V}{\partial p}\right)_T\right\} + dQ \tag{1}
￥]
とhtmlのbody内に記述すれば、(説明の時の￥マークは全角である。自分で使うときには半角に直してほしい。)
\[ dU = -p~\left\{\left(\frac {\partial V}{\partial T}\right)_p dT + \left(\frac {\partial V}{\partial p}\right)_T\right\} + dQ \tag{1} \]
のように表示される。もっと単純な例では、
￥[(a+b)c=c(b+a)￥]
と記述すれば、
\[(a+b)c=c(b+a)\]
と表示される。以下に最初の数式(1)の詳細な説明をおいておく。
詳細説明：
- \left(\right)によって中に含まれる数式の高さに合わせた()で囲むことができる。ちなみに中括弧{}は\{\}もしくは\left\{\right\}、大括弧[]は[]もしくは\left[\right]によって表示することができる。
- 分数は\frac{分子}{分母}によって表示する。
- 特殊な文字は\+約束語で表示する。例えば偏微分記号\(\partial\)は\partialで表示している。あとはギリシャ文字\(\theta\)なんかは\thetaで表示されるといった具合だ。
- 下付き文字は_のあとに書く。一文字でない場合には_{ij}のように書く。例えば\(g_{ij}\)は\g_{ij}と記述すればよい。上付き文字は^で書く。
- スペースは~によって表示する。
特に特殊文字に関してはTeXに準じているので、検索すればすぐに見つかるだろう。
3.式を揃える
式を揃えるときには￥begin{align}￥end{align}によって数式を挟む。また揃えたい位置に&を、改行には\\を入れる。例えば
￥begin{align}
\int\frac{dT}{T} + \left(\gamma -1 \right)\int\frac{dV}{V} &= const. \\\\
\ln T + \left(\gamma -1 \right) \ln V &= const. \\\\
\ln \left( TV^{\gamma-1} \right) &= const. \\\\
TV^{\gamma-1} &= const.
￥end{align}
と記述すれば、
\begin{align}
\int\frac{dT}{T} + \left(\gamma -1 \right)\int\frac{dV}{V} &= const. \\\\
\ln T + \left(\gamma -1 \right) \ln V &= const. \\\\
\ln \left( TV^{\gamma-1} \right) &= const. \\\\
TV^{\gamma-1} &= const.
\end{align}
のように表示される。改行一つだと式の感覚が狭くてみにくい時があるので、臨機応変に数を増やす。僕は分数がなければ1つの改行、あれば2つの改行という風に使い分けている。
これを応用して、連立方程式を並べて表示することができる。
￥[
\left\{￥begin{align}{c}
2x + y &= 3 \\
3x - 4y &= 1
￥end{align}\right.
￥]
とすれば、
\[
\left\{\begin{align}
2x + y &= 3 \\
3x - 4y &= 1
\end{align}\right.
\]
のように表示できる。
4.行列を表示する
行列の表示には￥begin{array}￥end{array}を用いる。例えば、
￥[
G = \left(
￥begin{array}{cc}
g_{11} & g_{12} \\
g_{21} & g_{22}
￥end{array}
\right)
￥]
のように記述すれば、
\[G = \left(\begin{array}{cc} g_{11} & g_{12} \\ g_{21} & g_{22} \end{array}\right)\]
という風に表示される。{cc}というのは列が2つありますよ、という宣言で、3つなら{ccc}、4つなら{cccc}とすればよい。
5.マクロを組む
mathjaxではマクロを組むことができる。例えばベクトルの発散はdiv記号で書かれるが、普通にdivと記述するだけでは、\(div\)こんな風に斜体で表示されてしまう。実は\mathrm{div}と書けば斜体ではなくなるのだが、毎回こんなふうに書くのもめんどくさい。
そこでマクロを使う。javascriptファイルを用意してやって、
MathJax.Hub.Config({
TeX:{
Macros:{
Div: '{\\mathrm{div}}'
}
}
});
MathJax.Ajax.loadComplete(\"https://whyitsso.net/mathjax_macro.js\");
と記述し、
<script type=\"text/javascript\" src=\"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML,
https://whyitsso.net/mathjax_macro.js
\"></script>
のようにheadタグ内でスクリプトを読み込んでやる。太字の部分はするとhtml内で\Divとすると\(\Div\)のように斜体でないdivが表示できる。
また、例えばベクトルの表示をするときに、太字にしたい時がある。そのようなとき\mathbf{a}と書けば\(\mathbf{a}\)のように表示できるのだが、毎回mathbfと書くのはめんどくさい。よく使うので、僕はこれもマクロにしている。
MathJax.Hub.Config({
TeX:{
Macros:{
b: ['{\\mathbf{#1}}',1]
}
}
});
MathJax.Ajax.loadComplete(\"https://whyitsso.net/mathjax_macro.js\");
のように書くと、\b{a}が\(\b{a}\)と太字のaで表示される。#1というのは変数番号を表していて、そのあとの1というのは変数の数を表している。もし2つ変数を使うようなマクロを組みたいのであれば、#1と#2を定義の中に記述してあげて、最後を2に変えてあげればよい。
6.表示場所などを変更する
デフォルトの状態では中央寄せで表示されてしまうが、左に寄せて表示したいという時もある。
そんなときは、上のマクロの時と同じようにjavascriptファイルを用意して、
MathJax.Hub.Config({
displayIndent: "2em"
});
MathJax.Ajax.loadComplete(\"https://whyitsso.net/mathjax_macro.js\");
と記述する。Indentの量は適当に自分で調整してほしい。
参考：
このサイトで使用しているマクロファイル