帰ってきた「しっぽのさきっちょ」

しっぽのさきっちょ: 2017-09-27 付 （2017-10-02 更新）

ちょこっと MathJax： 初期設定

no extension

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

  1. ちょこっと MathJax： 初期設定 ← イマココ
  2. ちょこっと MathJax： 基本的な数式表現

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

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

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

と書くとブラウザ側では

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

と適切に表示してくれる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.2/MathJax.js?config=TeX-AMS_HTML&locale=ja"></script>

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

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

MathJax: context menu
MathJax: context menu

ブラボー！

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 です（笑）

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

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" をセットすると \begin{equation} ... \end{equation} 等で囲まれた別行立て数式のみ自動採番を行う（この場合は $$ ... $$ で囲む必要はない）。

エネルギーと質量には
\begin{equation}
  E=mc^2 \label{eq:1}
\end{equation}
の関係がある。

エネルギーと質量には \begin{equation} E=mc^2
\label{eq:1} \end{equation} の関係がある。

ちなみに \label{eq:1} は数式に対応するラベルを表し，このラベルを参照する “\eqref{eq:1}” を使って

エネルギーと質量には \eqref{eq:1} の関係がある。

エネルギーと質量には \eqref{eq:1} の関係がある。

と記述できる（$ ... $ で囲む必要はない）。

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

たとえば

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

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

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

“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 であれば数式の周囲の地文（大抵は本文）の組版規則6と書体が継承される。 既定値は 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 で指定した書体がローカル環境にある7 場合は，その書体を使用する。 複数の書体を列挙できるが 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 フォントで数式好きの方には人気が高い8 が， 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>

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

ブックマーク

参考図書

photo
[改訂第7版]LaTeX2ε美文書作成入門
奥村 晴彦 黒木 裕介
技術評論社 2017-01-24
評価

LaTeX2e辞典~用法・用例逆引きリファレンス (DESKTOP REFERENCE) 公共政策入門 ミクロ経済学的アプローチ Rで楽しむ統計 (Wonderful R 1) 岩波データサイエンス Vol.5 数学ガールの秘密ノート/積分を見つめて (数学ガールの秘密ノートシリーズ) 岩波データサイエンス Vol.6 独習 LaTeX2ε 具体例から学ぶ 多様体 【改訂第3版】基礎からわかる情報リテラシー はじめて学ぶリー群 ―線型代数から始めよう

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

reviewed by Spiegel on 2017-09-27 (powered by G-Tools)

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