ちょこっと MathJax

ふだん数式とか使わないけど，たまには使いたい時もある。そういうとき，手軽にかつ綺麗に数式を入力・表示するには MathJax を使うといいらしい。

MathJax
mathjax/MathJax （GitHub）

MathJax を使うには MathJax.js を読みこめばいいのだが， MathJax では CDN（Content Distribution Network）が使える。したがって

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja"></script>

という記述を HTML に書くだけで使えるようになる。

（HTML5 では <script> 要素の type の既定が "text/javascript" なので，この場合は省略可能。また，他のページの説明を見ると src の指定が <script src="http://～"> となっているが，セキュリティ上の問題（なりすまし等）があるため，上記のように https を使うのが望ましい）

（locale=ja パラメータを指定すると数式を右クリックした際のコンテキストメニューやヘルプが日本語になる。お試しあれ）

MathJax.js を指定する場所は，通常は <head> 要素内だが， <body> 要素内に書いても問題なく動作するようだ。使い分けとしては，数式をよく使うまたは MathJax の機能をフルに使う場合は <head> 要素内に（あらかじめテンプレート等で）指定する。たまにちょこっとだけ数式を使いたいときは都度都度に <body> 要素内の最後の方に記述するとよいだろう。

日本語の記事に数式を混ぜると地の文と数式とのバランスがおかしくなるようだ。この場合は configuration を

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja">
  MathJax.Hub.Config({
    "HTML-CSS": {matchFontHeight: false}
  });
</script>

のように変更するとよい。また

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja">
  MathJax.Hub.Config({
    "HTML-CSS": {
      matchFontHeight: false,
      preferredFont: null,
      webFont: "TeX"
    }
  });
</script>

のように preferredFont と webFont を指定すると強制的に Web フォントを読み込むみたい。

MathJax では LaTeX 記法がそのまま使える。例えば本文に数式を記述するには $ ... $ で囲んで

エネルギーと質量には \( E = mc^2 \) の関係がある。

とする。この場合の出力結果は

エネルギーと質量には $ E = mc^2 $ の関係がある。

となる。 configuration で

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
    }
  });
</script>

と指定すると本文中の数式指定に $ ... $ が使える。

エネルギーと質量には $ E = mc^2 $ の関係がある。

エネルギーと質量には $ E = mc^2 $ の関係がある。

この場合，もし本文で \$ 文字が使いたい場合は \$ とエスケープする。

不等号記号（< または >）を使う際は \lt または \gt を使うほうが安全である。

不等号は $ a \lt b $ または $ a \gt b $ と記述する。

不等号は $ a \lt b $ または $ a \gt b $ と記述する。

（ちなみに LaTeX には \lt マクロや \gt マクロは存在しないので， LaTeX 入力と互換にするには LaTeX 側で

\newcommand{\lt}{<}
\newcommand{\gt}{>}

などと定義しておく）

別行の数式の場合は \[ ... \] で囲んで

\[
  \frac{\pi}{2} =
  \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 =
  \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} =
  \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1}
  \tag{1}
  \label{eq:1}
\]

などと記述する。この場合の出力結果は

\[ \frac{\pi}{2} = \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 = \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} = \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1} \tag{1} \label{eq:1} \]

となる。 \tag{1} は式番号を与える。またラベル \label{eq:1} をセットしておけば \eqref{eq:1} を使って\eqref{eq:1}と展開される。

以上の数式展開は <code> 要素および <pre> 要素内では無効になる。

んー，こんな感じかな。