ちょこっと MathJax：初期設定

ちょっと思いついたので，これから何回かに分けて MathJax について簡単に紹介していきたいと思う。

MathJax は Web ブラウザ上で数学論文等でも使える高品質な数式表現を行うための JavaScript パッケージで GitHub にリポジトリがある。

MathJax リポジトリ

数式表現として $\mathrm{\TeX}$ 記法¹ が使えるのが特徴で，たとえば HTML ソースに

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

と書くとブラウザ側では

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

と適切に表示してくれる²。

この記事ではまず Web ページ上で MathJax が動くところまでを説明していこう。数式の書き方については次回以降に解説していく予定である。

MathJax のインストール

MathJax は JavaScript パッケージなので <script> 要素で指定する。 CDN (Content Delivery Network) で配布されているので HTML の <head> 要素内に

<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML&locale=ja"></script>

と記述すればよい（async を忘れずに）。なお URL の “2.7.4” 部分はバージョン番号で，2018年4月3日時点の最新バージョンは 2.7.4 である³。

MathJax v2.7.4 now available | MathJax

URL パラメータ部の config=TeX-AMS_HTML については指定可能なコンフィギュレーションがいくつかあるが， $\mathrm{\TeX}$ 記法を使うのであれば TeX-AMS_CHTML または TeX-AMS_HTML を指定するのがいいだろう⁴。さらにパラメータ部に locale=ja を追加すると，数式部分で表示されるコンテキスト・メニューが日本語になる。

ブラボー！

MathJax のオプション

MathJax にはいくつかのオプションを設定できる。オプションの設定には JavaScript で MathJax.Hub.Config() 関数を使う。先程の <script> 指定と併せて <head> 要素内に以下のように記述する。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({ ... });
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML&locale=ja"></script>

オプション指定部のメディア・タイプに text/x-mathjax-config を指定すること（<script> の順番にも注意）。

{ ... } のオブジェクトに具体的なオプションを記述していく。全部を説明するのは大変なので，よく使いそうなものを幾つか紹介しよう。なお，最後の節に本ブログにおけるオプションの設定例を挙げているので，以降の解説がウザい方は丸写しでも OK です（笑）

（次節以降に出てくる「インライン数式」および「別行立て数式」については第3回で説明する）

Core Configuration Options

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left",
  displayIndent: "2em"
});
</script>

displayAlign は別行立て数式の位置を何処に寄せるか指定する。左寄せ（"left"），右寄せ（"right"），中央寄せ（"center"）を指定できる。既定値は "center"。また中央寄せ以外のときは displayIndent でインデント幅を指定できる。

左寄せで2文字分インデントさせた場合は以下のように表示される。

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

“tex2jax” Preprocessor Options

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    // displayMath: [['$$','$$'], ['\[','\]']], // default
    processEscapes: true
  }
});
</script>

inlineMath はインライン数式の開始・終了デリミタを指定する。複数列挙できる。上記の設定であれば $...$ または $...$ で囲まれた部分が MathJax の処理対象となる。 inlineMath の既定値は [['$','$']] のみである。

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

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

displayMath は別行立て数式の開始・終了デリミタを指定する。こちらも複数列挙できる。インライン数式と同じように $$...$$ または \[...\] で囲まれた部分が MathJax の処理対象となる。 displayMath の既定値は [['$$','$$'], ['\[','\]']] である。

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

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

processEscapes を true にすると，上述の数式開始・終了デリミタを \ 記号でエスケープする⁵。

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

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

既定値は false。

“TeX” Input Processor Options

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {
    equationNumbers: { autoNumber: "AMS" },
    extensions: ["mhchem.js"]
 }
});
</script>

equationNumbers で別行立て数式の採番を制御する。このうち自動採番については autoNumber で有効・無効を指定する。指定可能な値は "none", "all", "AMS" で，既定値は "none"。

自動採番を無効にする場合は "none" をセットする。ページ内の全ての別行立て数式に対して自動採番を有効にする場合は "all" をセットする。 "AMS" をセットした場合の動作については第3回を参照のこと。

extensions は文字通り拡張機能の指定で，複数の拡張機能を列挙することができる。このうち mhchem.js は MathJax で化学式や化学反応式を記述するための拡張である。

たとえば

経済成長と $\ce{CO2}$ 排出量は比例しなくなっている。

経済成長と $\ce{CO2}$ 排出量は比例しなくなっている⁶。

なんてな感じに書くことができる。

“CommonHTML” Output Processor Options

コンフィギュレーションに TeX-AMS_CHTML を指定した場合に有効になるオプション。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: {
    matchFontHeight: false,
    mtextFontInherit: true
  }
});
</script>

matchFontHeight が true であれば本文の文字の大きさにマッチするよう数式の文字の高さを調節してくれる。ただし本文が日本語だと却ってバランスが悪いようだ。したがって（既定値は true だが） false にしておくのがお薦めである。

mtextFontInherit は \text コマンドで囲まれた文字列の組版規則と書体を指定する。 false なら数式の規則のままだが true であれば数式の周囲の地文（大抵は本文）の組版規則⁷と書体が継承される。既定値は false。

たとえば mtextFontInherit を true にして

\begin{alignat*}{2}
    (a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\
            &= a(a + 2b) + b^2 &        & \text{a でくくる}
\end{alignat*}

と記述した場合は（『LaTeX2ε美文書作成入門』より引用）

\begin{alignat*}{2} (a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\ &= a(a + 2b) + b^2 & & \text{a でくくる} \end{alignat*}

と表示される。「a でくくる」の a が数式用の書体でないことに注意。さらに「a でくくる」を「$a$ でくくる」とすると

\begin{alignat*}{2}
    (a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\
            &= a(a + 2b) + b^2 &        & \text{$a$ でくくる}
\end{alignat*}

\begin{alignat*}{2} (a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\ &= a(a + 2b) + b^2 & & \text{$a$ でくくる} \end{alignat*}

と $a$ が数式用の書体になる。なお，日本語（和文）部分は数式内でも \text コマンドの有無に関係なく影響を受けない。

“HTML-CSS” Output Processor Options

コンフィギュレーションに TeX-AMS_HTML を指定した場合に有効になるオプション。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: ["STIX"],
    preferredFont: "STIX",
    webFont: "STIX-Web",
    matchFontHeight: false,
    mtextFontInherit: true
  }
});
</script>

availableFonts で指定した書体がローカル環境にある⁸ 場合は，その書体を使用する。複数の書体を列挙できるが MathJax/jax/output/HTML-CSS/fonts のいずれかである必要がある。ローカルの書体を使用しない場合は空の配列 [] を指定する。既定値は ["STIX","TeX"]。

availableFonts で指定した書体のうち優先して使う書体を preferredFont で指定する。 MathJax/jax/output/HTML-CSS/fonts のいずれかである必要がある。ローカルの書体を使用しない場合は null を指定する。既定値は "TeX"。

Web フォントを使用する場合は webFont で指定する。指定可能な書体は "TeX", "STIX-Web", "Asana-Math", "Neo-Euler", "Gyre-Pagella", "Gyre-Termes", "Latin-Modern"。 Web フォントを使用しない場合は null を指定する。既定値は "TeX"。

ちなみに STIX (Scientific and Technical Information Exchange) は Times 系の書体のひとつで，長い開発期間を経て2010年に正式リリースされた。 Microsoft Office や macOS などには既に同梱されているらしい。

"Neo-Euler" は黒板手書き風の Euler フォントで数式好きの方には人気が高い⁹ が， MathJax で利用する際には制限があるため取り扱いには若干の注意が必要である（次回で解説）。

Note that not all mathematical characters are available in all fonts (e.g., Neo-Euler does not include italic characters), so some mathematics may work better in some fonts than in others. The STIX-Web font is the most complete.

via The HTML-CSS output processor

特にこだわりがなければ既定値どおり "TeX" にするか "STIX" ("STIX-Web") を選択するのが無難だと思う（"TeX" にするならコンフィギュレーションを TeX-AMS_CHTML にすることをお薦めする）。

matchFontHeight および mtextFontInherit については CommonHTML オプションの節を参照のこと。

最終的なオプション設定

以上を踏まえて，本ブログにおける MathJax オプションの設定内容を以下に示す。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left",
  displayIndent: "2em",
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  },
  TeX: {
      equationNumbers: { autoNumber: "AMS" },
      extensions: ["mhchem.js"]
  },
  "HTML-CSS": {
    availableFonts: ["STIX"],
    preferredFont: "STIX",
    webFont: "STIX-Web",
    matchFontHeight: false,
    mtextFontInherit: true
  }
});
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML&locale=ja"></script>

これでようやく準備が整った。

ブックマーク

参考図書

[改訂第7版]LaTeX2ε美文書作成入門: 奥村晴彦, 黒木裕介; 技術評論社 2017-01-24; Book 大型本; ASIN: 4774187054, EAN: 9784774187051; 評価

ついに第7版が登場。紙の本で買って常に側に置いておくのが吉。

reviewed by Spiegel on 2017-09-27 (powered by amazon-item v0.2.0)

厳密には $\mathrm{\TeX}$ 記法ではなく $\mathrm{\LaTeX}$ 記法である。が，ここでは両者を区別することにあまり意味が無いので「$\mathrm{\TeX}$ 記法」で通すことにする。 ^[return]
$E=mc^2$ という入力に対して $E=mc^2$ と，各文字間を適切に空けたり詰めたりしてくれるのがお分かりだろうか。このように $\mathrm{\TeX}$ では数式を半自動的かつ適切に「組版」してくれるのが特徴である。ただし万能ではない。 ^[return]
ちなみに2017年5月から CDN の配布 URL が変わったので，設定が古いままの方は注意が必要である。 ^[return]
TeX-AMS_CHTML を指定すると HTML-CSS オプションをまるっと無視してしまい Web フォントの指定ができない。逆に TeX-AMS_HTML では CommonHTML オプションを無視してしまうようだ。 MathJax 側は TeX-AMS_HTML を古いブラウザ向けのレガシーなコンフィギュレーションと位置付けているようだが，やはり TeX-AMS_CHTML では Web フォントのカスタマイズができない（現在は "TeX" のみサポート）のが致命的だろう。この辺は今後のバージョンアップに期待したいところ。 ^[return]
processEscapes オプションを有効にすると $...$ までエスケープされてただの (...) になってしまうので注意すること。というか processEscapes オプションを有効にするなら $...$ は使わないほうがいいかも。また processEscapes オプションはパラグラフ <p>...</p> の中でのみ効いているようだ。 ^[return]
「経済成長とCO2排出量は「比例しなくなっている」：IEA報告書」より。 ^[return]
「地文の組版規則」とは要するに HTML/CSS の規則ということだが，\text コマンドで囲まれた部分は HTML の要素タグ等（<code> タグ等）は使えないようだ。試しにやってみたがエラーになってしまう。 ^[return]
$\mathrm{\TeX}$ 用フォントは $\mathrm{\TeX}$ 作業環境を整えた PC 以外にはインストールされていないのが普通である。 $\mathrm{\TeX}$ 用フォントは複数の OpenType フォントファイルで提供されるが，構成が特殊なため $\mathrm{\TeX}$ 以外での使用はおすすめできない。 ^[return]
結城浩さんの「数学ガール」シリーズでは数式表現に Euler フォントを使用している。 ^[return]