物理とか

Index

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)の詳細な説明をおいておく。

詳細説明 特に特殊文字に関しては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の量は適当に自分で調整してほしい。

参考:このサイトで使用しているマクロファイル