スタートページJavascript

MathJax:HTMLでの数式表示


MathJaxとは

次のような数式をブラウザに表示するのに、図版を作成して読み込むのは面倒です。

\[F(\omega) = \cfrac{1}{\sqrt{2\pi}}\int_{-\infty}^{+\infty}f(t)e^{i\omega t}dt \]

MathJaxとは、HTML内に次の記述をすれば、上のような表示ができるプラグインです。

¥[F(¥omega) = ¥cfrac{1}{¥sqrt{2¥pi}}¥int_{-¥infty}^{+¥infty}f(t)e^{i¥omega t}dt ¥]

自然科学系の論文では、複雑な数式が多く用いられます。そのために、ワープロソフトとしてLaTeXが広く普及していますが、ブラウザでの表示のためにはMathJaxが用いられています。
ここでは、MathJaxの概要を掲げます。

(注意)MathJaxを使うときは、他の目的に¥(半角の円マーク)を使わない

上枠のように、MathJaxでは「¥」は特定の意味をもちます。これは本来は、「/」(バックスラッシュ)なのです。
HTML文書ではUTF-8文字コード体系が広く使われており、このコード体系では円マークとバックスラッシュを区別しています。
ところが、日本語キーボードでは、「ろ」のキーを使っても¥が表示されてしまいます。しかも通常は、右上の¥がバックスラッシュと同じ内部コードに設定されています。
そのため、¥をMathJax以外の個所で使う(金額表示など)と、思わぬ表示になる危険性があります。

参照サイト

ここでは、個人的に必要な項目に限定しています。詳細については、次のサイトを参照してください。


MathJaxの概要

利用環境の設定

MathJaxのライブラリは、CDNとして公開されているので、head部に
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
  </script>
を記述するだけで利用できます。

記号と名称

よく用いる記号・名称は、にあります。
次のサイトにすべてが掲げられています。

数式の表示位置(インライン数式モードとディスプレイ数式モード)

¥( ~ ¥)と¥[ ~ ¥]

インライン数式モード:行の中に表示されます。¥( ~ ¥)で指定します。
ディスプレイ数式モード:改行して中央揃えで表示されます。¥[ ~ ¥] で指定します。

<p>2次方程式 ¥(ax^2 + bx + c = 0¥) の解は
¥[x = {-b ¥pm ¥sqrt{b^2-4ac} ¥over 2a}¥]
で与えられます。<br>

上のMathJaxを与えると、次のように表示されます。

2次方程式 \(ax^2 + bx + c = 0\) の解は \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\] で与えられます。

¥begin{ } ~ ¥end{ }

複数の数式をまとめて表示するときは、全体を¥begin{ } ~ ¥end{ }でくくります。このときはディスプレイ数式モードになります。
{ }には、多様なものがありますが、数式の場合は、{eqnarray*}を使うのが通常です。

MathJaxでは、<br>が使えません。改行には¥¥を使います。
特に指定をしないと右詰になります。

¥begin{eqnarray*}
 x+y=8¥¥
 2x+4y=26
¥end{eqnarray*}

\begin{eqnarray*} x+y=8\\ 2x+4y=26 \end{eqnarray*}

数式の相対位置の指定

&により、揃える位置を指定できます。
次の例では=の位置で合わせています(少しずれでいますが)。

¥begin{eqnarray*}
 x+y & =8 ¥¥
 2x+4y & =26
¥end{eqnarray*}

\begin{eqnarray*} x+y & =8\\ 2x+4y & =26 \end{eqnarray*}

2つの数式を左詰にするには{eqnarray*}では面倒な工夫が必要です。
数値などを対象とする{array}を用いるほうが簡単です。

¥begin{array}{l}
 x+y=8¥¥
 2x+4y=26
¥end{array}

\begin{array}{l} x+y=8\\ 2x+4y=26 \end{array}

式番号

「~式(5)より~」というように、式番号が必要になることがあります。

個別に式番号を与える場合

式番号を他の場所で使うとき、「式(5)」のように明記するならば簡単です。
¥tag{5}により、行番号が5になります。

これにより、式(5)が成立します。
¥[
 x+y=8
 ¥tag{5}
¥]
これにより、式(5)が成立します。
\[ x+y=8 \tag{5} \]

上の方法の欠点として、式番号「5」を覚えている必要があります。この式にanswerという名称を付けて、式{answer}とすれば「式(5)」と表示できれば便利です。
それには、¥tag{5}で行番号を5、¥label{answer}で名称をgaussとします。
行番号を他の個所で取り出すには¥eqref{名称}とします。

これにより、式¥eqref{answer}が成立します。
¥[
 x+y=8
 ¥tag{5}
 ¥label{answer}
¥]
これにより、式\eqref{answer}が成立します。 \[ x+y=8  \tag{5} \label{answer} \]

式番号の自動付番

(注意)この機能を使うには、次のスクリプトをhead部に加える必要があります。

  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({TeX:{equationNumbers:{autoNumber:"AMS"}}});
  </script>

¥tag{}で式番号を与えていると、後で付番する数式が必要になり番号を発生順に並べ替えるのは面倒です。
上のスクリプトを設定しておくと、¥begin{eqnarray} ~ ¥end{eqnarray} のような別行立ての数式に,式番号が自動的に割り付けられ、再付番も自動的に行われます。
(先に、¥begin{eqnarray*}の例を掲げました。*があれば自動付番の対象になりません。)

下の例では、数式の名称「人数」「費用」「解」を用いて記述しておけば、数式が追加になっても、地の文を変更する必要がありません。

<p>人数と費用の条件から
¥begin{eqnarray}
 x+y=8   ¥label{人数} ¥¥
 2x+4y=26 ¥label{費用}
¥end{eqnarray}
が得られる。
¥eqref{人数}、¥eqref{費用}の 解は¥eqref{解}になる。
¥begin{eqnarray}
 x=3, y=5 ¥label{解}
¥end{eqnarray} </p>

人数と費用の条件から\begin{eqnarray} x+y=8 \label{人数} \\ 2x+4y=26 \label{費用} \end{eqnarray} が得られる。
\eqref{人数}、\eqref{費用}の解は\eqref{解}になる。 \begin{eqnarray} x=3, y=5 \label{解} \end{eqnarray}


パターン集

膨大な文法を覚えるよりも、似たパターンをカスタマイズするほうが便利です。
(私が)よく使うパターンを列挙します。冒頭に掲げた「参照サイト」に、さらに豊富なパターンがあります。

基本要素       
文字記号
¥bar{文字}、
¥overline{文字列}など
\[ \bar{a}, \ \overline{abc},\quad \tilde{a},\ \ \ \widetilde{abc},\quad \hat{a},\ \widehat{abc} \]
\[
  \bar{a},    \ \overline{abc},\quad
  \tilde{a},\ \ \ \widetilde{abc},\quad
  \hat{a},\ \widehat{abc}
\]
半角スペースは無視される。¥で代行する。
複数スペースの場合は¥を、間に空白をお
いて並べる。¥_¥
&quadは、適当に長いスペースを意味する。
下付き(添え字)「_」
上付き(指数)「^」
\[ F_x = x^2 \]
\[
  F_x = x^2
\]
中黒、繰り返し
\cdot, \cdots
\[ {}_n \mathrm{ P } _k = n \cdot ( n - 1 ) \cdots (n-k+1) \]
\[
  {}_n \mathrm{ P } _k
  = n \cdot ( n - 1 ) \cdots (n-k+1)
\]
{}は「何もない」ことを示す。
{}_nで、最初に下付きのnが表示される。
\mathrmは立体フォント。単にPとすると
斜体のになる。
省略(...)
\ldots
\[ \sqrt{2} = 1.4142 \ldots \]
\[
  \sqrt{2} = 1.4142 \ldots
\]
分数表示
\frac{分子}{分母}
\[ 損益分岐点=\frac{固定費}{1- \frac{変動費}{売上高} } \]
\[
  損益分岐点
  =\frac{固定費}{1- \frac{変動費}{売上高}}
\]
文字列には日本語も使える。
連分数の部分が小サイズになる
分数表示2
連分数の文字を同じサイズにする
\cfrac
\[ 損益分岐点=\frac{固定費}{1- \cfrac{変動費}{売上高} } \]
\[
  損益分岐点
  =\frac{固定費}{1- \cfrac{変動費}{売上高}}
\]
すべての\fracを\cfracにしてもよい
複数式をまとめて表示
複数式を扱うには\bigin ~ \end とする。
これだけのときは \[ \]は省略できる。
表示での改行(<br>に相当)は¥¥。
&は、要素の区切記号であるとともに、
この点で各行が位置合わせされる。
配列(中央揃え)
\bigin{array}{配置}
\begin{array}{c} 1 & 2 \\ 11 & 12 \end{array}
\begin{array}{c}
    1 & 2 \\
    11 & 12
\end{array}
{c}中央、{r}右詰、{l}左詰
省略時{}は中央
{c}は{cc}のように列数並べたのと同じ
配列(右詰) \begin{array}{r} 1 & 2 \\ 11 & 12 \end{array}
\begin{array}{r}
    1 & 2 \\
    11 & 12
\end{array}
配列(混在) \begin{array}{lr} 1 & 2 \\ 11 & 12 \end{array}
\begin{array}{lr}
    1 & 2 \\
    11 & 12
\end{array}
第1列は左詰、第2列は右詰
配列(罫線)
縦線は{配置}で指定
横線は\line
\begin{array}{|l|r|} 1 & 2 \\ \hline 11 & 12 \end{array}
\begin{array}{|l|r|}
    1 & 2 \\
    \hline
    11 & 12
\end{array}
表上下の線の引き方を私はしらない。
行列
\begin{pmatrix}
{配置}指定はできない
\begin{pmatrix} 1 & 2 \\ 11 & 12 \end{pmatrix}
\begin{pmatrix}
    1 & 2 \\
    11 & 12
\end{pmatrix}
行列式
\begin{bmatrix}
{配置}指定はできない
\begin{bmatrix} 1 & 2 \\ 11 & 12 \end{bmatrix}
\begin{bmatrix}
    1 & 2 \\
    11 & 12
\end{bmatrix}
行列式(右寄せ)
[ ]を\left[、\right]。
内部を{array}で記述。
\[ \left[ \begin{array}{r} 1 & 2 \\ 11 & 12 \end{array} \right] \]
\[
  \left[
  \begin{array}{r}
    1 & 2 \\
    11 & 12
  \end{array}
  \right]
\]
\bigin ~ \end は入れ子にできる。
式の展開 \begin{align*} x & = (1+2) \times (3+4) \\ & = 3 \times 7 \\ & = 21 \end{align*}
\begin{align*}
 x & = (1+2) \times (3+4) \\
   & = 3 \times 7 \\
   & = 21
\{align*}

連立方程式1
\begin{eqnarray*}
\begin{eqnarray*} x+y=8\\ 2x+4y=26 \end{eqnarray*}
\begin{eqnarray*}
    x+y=8\\
    2x+4y=26
\end{eqnarray*}
複数の式をまとめて扱う標準形式は
\begin{eqnarray*}を用いる。
(*を外すと行番号が自動付加)
何の指定もなければ右詰になる。
連立方程式2
\left、\right
\[ \left\{ \begin{array}{l} x+y&=8\\ 2x+4y&=26 \end{array} \right. \]
\[
  \left\{
  \begin{array}{l}
      x+y&=8\\
      2x+4y&=26
  \end{array}
  \right.
\]
複数式の配置を重視するならば
{eqnarray*}より{array}のほうが簡単
左詰にして&で等号の位置を合わせる
\right.の「.」は、「何もない」の意味
\rightは省略できない。
連立方程式3(}) \[ \left. \begin{array}{l} x+y&=8\\ 2x+4y&=26 \end{array} \right\} \therefore x=3, y=5 \]
\[
  \left.
  \begin{array}{l}
      x+y&=8\\
      2x+4y&=26
  \end{array}
  \right\}
  \therefore x=3, y=5
\]
場合分け
\begin{cases}
\[ \max( a, b ) = \begin{cases} a & ( a \geqq b ) \\ b & ( a \lt b ) \end{cases} \]
\[
  \max( a, b ) = 
  \begin{cases}
      a & ( a \geqq b ) \\
      b & ( a \lt b )
  \end{cases}
\]
\begin{cases}は { を自動的に付ける。
大文字記号の標準形
累積 Σ \[ \sum_{k=1}^{n} k^2 = \overbrace{1^2+2^2+ \cdots + n^2}^{n} \\ = \frac{1}{6} n(n+1) (2n+1) \]
\[
  \sum_{k=1}^{n} k^2
  = \overbrace{1^2+2^2+ \cdots + n^2}^{n} \\
  = \frac{1}{6} n(n+1) (2n+1)
\]
\sum_{始値}^{終値}数式
積分 ∫
\[ \int_{0}^{\infty} f(x)dx = \left[ \frac{1}{x+1} \right]_0^\infty = -1 \]
\[
  \int_{0}^{\infty} f(x)dx
  = \left[ \frac{1}{x+1} \right]_0^\infty
  = -1
\]
\int_{下限}^{上限}関数dx
df/dxとlim \[ \frac{ df }{ dx } = \lim_{ \Delta x \to 0 } \frac{ f(x + \Delta x) - f(x) }{ \Delta x } \]
\[
    \frac{df}{dx}
    = \lim_{\Delta x \to 0}
    \frac{f(x+ \Delta x)-f(x)}{\Delta x}
\]