Texによる数式表現16～MathJax3.0の利用

1. MathJax3.0

　前回の記事でmhchemを利用する場合に用いていたのがMathJax2.7だったが、今回は最新のMathJax3.0の利用方法について紹介したい。

atatat.hatenablog.com

atatat.hatenablog.com

2. MathJax3.0のロードと設定

MathJax3.0をロードするには、記事内に以下のコードを記述する。(physicsパッケージをロードする設定にしている）MathJaxの初期設定などはMathJax v3 がリリースされていた — リリース情報 | text.Baldanders.info を参照。

<script>
MathJax = {
  loader: {load: ['[tex]/physics']},
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    packages: {'[+]': ['physics']}
  },
  chtml: {
    matchFontHeight: false
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> //IE用スクリプト

注意点としては初期設定や拡張パッケージのロードする際の記述が前回ver 2.7から異なっている。以下はMathJax2.7でmhchemを読み込む際のコードを参考までに示す。

+MathJax2.xをロードするscript

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ],
    processEscapes: true
  },
  TeX: {
    extensions: ["mhchem.js"]
  },
  CommonHTML: {
    matchFontHeight: true
  }
});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML">
</script>

なおver 2.7ではmhchemは拡張パッケージをロードする設定が必要だったが、今回のver 3.0はMathJaxを呼び出すこと(autoload extensionが読み込まれて*1 )で自動的にロードされる。従って文中に$\ce{H2O}$は$\ce{H2O}$となり、事前に拡張パッケージをロードする必要がない。ロードされる拡張パッケージの機能はmacroを定義しているが、physicsは他のmacroの定義と干渉するため自動でロードされず、利用する場合はscriptに記述する必要がある。

(追記2020.09.21): CDNサイトへのプライバシーエラーによりChromeなどで数式表示できない。対策は下記参照

Texによる数式表現37～MathJax, KaTeX表示トラブルの要因・解決 - つれづれなる備忘録

Texによる数式表現38～MathJaxの表示トラブル解決法 - つれづれなる備忘録

3. MathJax3.0で利用できる拡張パッケージ

MathJax3.0で利用できる拡張パッケージをThe TeX/LaTeX Extension List — MathJax 3.1 documentationを基にパッケージ名と概略機能、使用例をまとめた。physicsパッケージの干渉やその他の理由ですべてのパッケージのコマンドは実行できないが、実行できるものに関しては大まかにどんな機能かわかりやすいものを使用例に記載した。
注：HOMEやTOPページで複数ページ表示された状態では、script同士が干渉してうまく認識できないコマンドがある模様。1記事のみ個別のページとしてロードすれば正しく表示される

パッケージ名	機能	使用例 など
action	MathMLコマンド	クリックして切替: $\toggle{y=x^{2}}{y=\sqrt{x}}\endtoggle$
ams	ams fontなど	MathJax利用時に設定
amsCd	可換図式の作成
autoload	拡張パッケージ自動ロード	自動ロードからはずす場合
bbox	数式の枠設定など	枠の書式設定: $\bbox[5px, border: 2px solid red]{x+y}$
boldsymbol	太字書体の提供
braket	ブラ・ケット記法	ブラ・ケットベクトルの表記: $ \bra{\phi} \ket{\psi} $
cancel	数式の消去記号	数式消去: $\cancel{x+y}$
color	数式文字の色	数式中の文字色: $\color{red}{x} + \color{blue}{y}$
colorV2	MathJax ver2の数式文字の色
configMacros	macroオプション設定	MathJax利用時に設定
enclose	MathMLコマンド	数式を囲う: $\enclose{circle}[mathcolor="red"]{\color{black}{x+y}}$
extpfeil	矢印マクロ
html	html機能	数式でハイパーリンク: $\href{#top}{x+y}$
mhchem	化学式	化学式表記: $\ce{ H2O} $
newcommand	コマンド定義
noerrors *	texエラー表示オフ
noundefined	エラー時表示をマクロ名
physics *	物理学に用いる表現	微分記号d: $\dd x $
requrire	数式中でパッケージをロード
tagFormat	数式のナンバリング
unicode	unicode文字変換
verb	そのまま出力する	Tex処理せず $\verb|\sqrt{x}|$

*は自動ロードされないパッケージ

4. まとめ

今回はMathJax3.0とロードする方法について紹介した。拡張パッケージの機能を利用することで数式表現の幅が広がる。またphysicsパッケージは、ローマン体への変換や括弧サイズなどの調整を行うコマンドがあり物理に関わらず、通常の数式表現に関してコマンドが簡略化できるので、次回以降機能を詳しく紹介していきたい。

*1:autoloadについては autoload — MathJax 3.1 documentation