MathJaxによる数式表示

MathJax は $\mathrm{\LaTeX}$ 並みの数式表示能力をJavaScriptで実現したライブラリです。

MathJaxを使うには，<head> … </head> の中のどこかに次のように書いておきます：

<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>

以前のこのページでは最後の部分が TeX-AMS_HTML になっていましたが，今は TeX-AMS_CHTML（CommonHTML）が推奨のようです。

最近は http:// より https:// が推奨されているようです。また，単に // で始まるURLを使えば，http:// か https:// かは元サイトに合わせてくれます（古いブラウザではうまくいかないかもしれません）。

ただし，当サイトでお勧めしている <html lang="ja"> のような日本語環境指定のHTMLの中では，周囲の環境と文字の高さ（x-height）のバランスを自動調整する機能がうまく働かないので，上の代わりに次のように書いておくほうがいいでしょう：デフォルトでは周囲の環境と英小文字の高さ（x-height）を自動的に合わせますが，日本語環境ではうまくいかないこともあるので，このサイトではその機能を次のようにして切っています：

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: { matchFontHeight: false }
});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>

数式の書き方はほぼLaTeX + amsmathのスタイル通りです。ただ，本文中の数式はデフォルトでは $ ... $ ではなく \( ... \) で指定します。これが面倒なら，頭の部分を

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  },
  CommonHTML: { matchFontHeight: false }
});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>

のようにすれば $ ... $ も使えるようになります。ただの \$ を使いたい場合には \$ のようにエスケープします。なお，<pre> ... </pre> や <code> ... </code> の中ではエスケープは不要です。

さらに，別行の数式を中央揃えでなく左から全角2文字分くらいで揃えるには，次のようにします。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  },
  CommonHTML: { matchFontHeight: false },
  displayAlign: "left",
  displayIndent: "2em"
});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>

例：

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

HTMLだけで書いた E = mc2（<span lang="en"><i>E</i> = <i>mc</i><sup>2</sup></span>）と比較してください。

別行の数式は \[ ... \] です。

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

注意として，$a<b$ のように書くと，ブラウザが < をタグの一部と解釈してしまって，うまくいきません。$a < b$ のようにスペースを空ければたいていうまくいくはずです（$a < b$ のテスト：$a < b$ ←MacのSafari，Chrome，Firefox，WindowsのIE11ではうまくいきました。うまくいかないブラウザがあれば教えてください）。あるいは，$a &lt; b$ のように書くか，$a \lt b$ のようなマクロを使います。

MathJaxの \lt というマクロは，標準のLaTeXでは定義されていません。\newcommand{\lt}{<} のように定義しておく必要があります。

詳細は本家の MathJax Documentation をご覧ください。ぎるばーとさんのMathJaxの使い方も参考になります。

Last modified: