MathJaxによる数式表示

[告知] 以前このページで、IEに対応させるためのコード例 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> を紹介していましたが、polyfillはドメイン名ごと中国企業に売却されました。利用を止めてください（もうIEなんてないでしょうし）。

MathJax は $\mathrm{\LaTeX}$ 並みの数式表示能力をJavaScriptで実現したライブラリです。類似のものにKaTeXがあります。

MathJaxの読み込み方はいろいろ考えられますが、ここではMathJaxのバージョンやブラウザの対応状況に応じて柔軟に変えられるように、別ファイルで読み込んでいます：

<script src="/js/load-mathjax.js" async></script>

load-mathjax.js というファイルは現在次のようになっています：

window.MathJax = {
  chtml: {
    matchFontHeight: false
  },
  tex: {
    inlineMath: [['$', '$']]
  },
  svg: {
    fontCache: 'global'
  }
};

(function () {
  const script = document.createElement('script');
  if (navigator.userAgent.includes("Chrome") || navigator.userAgent.includes("Firefox"))
    script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
  else
    script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
  script.async = true;
  document.head.appendChild(script);
})();

ChromeやFirefoxではSVG方式、SafariではCommonHTML方式のMathJaxを読み込んでいます。本来はSVG方式のほうが大きい記号も出せて良いのですが、なぜかSafariでは表示がぼやけるようになってしまいました。また、CommonHTML方式の場合、英小文字の高さ（x-height）を本文に自動的に合わせますが、日本語環境ではうまくいかないこともあるので、切っています。インライン数式の書き方はデフォルトでは \( ... \) ですが、ここでは $ ... $ に設定しています。SVG方式の場合のフォントキャッシュをグローバルに設定しています。

数式の書き方はほぼLaTeX + amsmathのスタイル通りです。

インライン数式を $ ... $ に設定しましたが、ただの $ を使いたい場合には <span>$</span> と書きます。なお、<pre> ... </pre> や <code> ... </code> の中の $ はインライン数式になりません。

例：

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

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

HTMLだけで書いた E = mc²（<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}
\]

注意として、$a<b$ のようにスペースなしで不等号を書くと、ブラウザが < をタグの一部と解釈してしまって、うまくいかないようです。$a < b$ のようにスペースを空ければうまくいくはずです。あるいは、$a < b$ のように書くか、$a \lt b$ のようなマクロを使います。

奥村 晴彦

Last modified: 2024-06-26 15:23:38 JST