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: