スタートページ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のライブラリは、CDNとして公開されているので、head部に次を記述するだけで利用できます。

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

mathjaxは、HTMLの一種のプレコンパイラです。単純にいえば、HTMLを分析して、MathJax対象の文字列があれば、それを図版にして、HTMLに組み込みます。

その分析には、多様なオプション項目があります。上のCDNだけでは標準(デフォルト)に設定されています。そのオプションを設定することにより、多様な指定ができます。これに関しては別章mathJaxHubConfigで扱います。

記号と名称

よく用いる記号・名称は、にあります。


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

¥( ~ ¥)と¥[ ~ ¥]

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

<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}\] で与えられます。

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

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

¥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} \]

パターン集

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

基本要素       
文字記号
¥bar{文字}、
¥overline{文字列}など
\[ \dot{a},\ \ddot{a},\quad \bar{a}, \ \overline{abc},\quad \tilde{a},\ \ \ \widetilde{abc},\quad \hat{a},\ \widehat{abc} \]
\[
  \dot{a},\ \ddot{a},\quad
  \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}
\]