ちょこっと MathJax: 初期設定
ちょっと思いついたので,これから何回かに分けて MathJax について簡単に紹介していきたいと思う。
- ちょこっと MathJax: 初期設定 ← イマココ
- ちょこっと MathJax: 基本的な数式表現
- ちょこっと MathJax: インライン数式と別行立て数式
- ちょこっと MathJax 番外編: mathcomp パッケージの代替え
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.4/MathJax.js?config=TeX-AMS_HTML&locale=ja"></script>
と記述すればよい(async
を忘れずに)。
なお URL の “2.7.4
” 部分はバージョン番号で,2018年4月3日時点の最新バージョンは 2.7.4 である3。
URL パラメータ部の config=TeX-AMS_HTML
については指定可能なコンフィギュレーションがいくつかあるが, $\mathrm{\TeX}$ 記法を使うのであれば TeX-AMS_CHTML
または TeX-AMS_HTML
を指定するのがいいだろう4。
さらにパラメータ部に 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 にすると,上述の数式開始・終了デリミタを \
記号でエスケープする5。
エネルギーと質量には \$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}$ 排出量は比例しなくなっている6。
なんてな感じに書くことができる。
“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 であれば数式の周囲の地文(大抵は本文)の組版規則7と書体が継承される。
既定値は 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
で指定した書体がローカル環境にある8 場合は,その書体を使用する。
複数の書体を列挙できるが 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 フォントで数式好きの方には人気が高い9 が, 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. TheSTIX-Web
font is the most complete.
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]