MathJaxによる数式表示

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

MathJaxの読み込み方はいろいろありますが,<head></head> の中のどこかに例えば次のように書いておきます(以前は tex-chtml.js を使っていましたが,大きい記号がうまくいかないので,こちらに変えました):

<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

デフォルトでは周囲の環境と英小文字の高さ(x-height)を自動的に合わせますが,日本語環境ではうまくいかないこともあるので,このサイトではその機能を次のようにして切っています:

<script>
MathJax = {
  chtml: {
    matchFontHeight: false
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

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

<script>
MathJax = {
  chtml: {
    matchFontHeight: false
  },
  tex: {
    inlineMath: [['$', '$']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

のようにすれば $ ... $ になります。ただの $ を使いたい場合には <span>$</span> と書きます(\$ のようにエスケープしてもいいはずですが,うまくいかないことがあるようです。バグ?)。なお,<pre> ... </pre><code> ... </code> の中ではエスケープは不要です。

例:

エネルギーと質量には $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 &lt; b$ のように書くか,$a \lt b$ のようなマクロを使います。

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


Last modified: