ちょこっと MathJax：初期設定

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

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

MathJax リポジトリ

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

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

と書くとブラウザ側では

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

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

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

MathJax の組み込み

MathJax は v3 より完全に node.js ベースでの開発になった。したがってサーバ側に組み込むこともできる。今回は Web ページごとにクライアント側の JavaScript として組み込む方法を紹介する。

といっても組み込み自体は簡単で MathJax は CDN (Content Delivery Network) で配布されているので HTML の <head> 要素内に以下の行を追加するだけである。

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

MathJax v3 の特定バージョンを指定するには以下のようにバージョンを明記する。

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"></script>

なお 2020-09-25 時点の最新バージョンは 3.1.2 である。

MathJax v3 は，そのままでは IE (Internet Explorer) に対応していない。ただし IE11 に対応するのであれば，直前に1行足して

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

などとすればいいらしい。ちなみに IE11 より前は（Microsoft も MathJax v3 も）既にサポート外なのでご注意を。

CDN から利用する場合，プロトコルは HTTPS のみで HTTP を明示的に指定しても HTTPS にリダイレクトされるようだ。最近のブラウザは HTTP と HTTPS が混在するページでは（セキュリティの関係で）上手く表示できない場合があるので注意が必要である。どうしても HTTP を使いたいなら CDN を使わず自前で環境を用意するほうがいいだろう。

組み込む JavaScript は tex-mml-chtml.js 以外に以下のものがある。

JavaScript ファイル	内容
`tex-chtml.js`	入力：$\mathrm{\TeX}$ 記法 , 出力： HTML
`tex-chtml-full.js`	入力：$\mathrm{\TeX}$ 記法（フル機能）, 出力： HTML
`tex-svg.js`	入力：$\mathrm{\TeX}$ 記法 , 出力： SVG
`tex-svg-full.js`	入力：$\mathrm{\TeX}$ 記法（フル機能）, 出力： SVG
`tex-mml-chtml.js`	入力：$\mathrm{\TeX}$ 記法または MathML , 出力： HTML
`tex-mml-svg.js`	入力：$\mathrm{\TeX}$ 記法または MathML , 出力： SVG
`mml-chtml.js`	入力：MathML 記法 , 出力： HTML
`mml-svg.js`	入力：MathML , 出力： SVG

MathML による入力は本記事では割愛する。

2020-09-25 追記

MathJax を CDN から読み込む際に Chrome や Edge だと上手く行かないらしい。

証明書云々ってこれのことかなぁ。

でも別に期限切れてないし期間も1年なので問題ないよなぁ。むしろ cdnjs.cloudflare.com の証明書のほうが（今は問題ないが）将来的にヤバくね？って感じなのだが（笑）

実は自マシンでは既に Chrome を捨てていて（つか Ubuntu では Chrome は既定で入ってない）スマホかタブレットの Chrome で確認するしかないんだけど，そっちは問題なく見れてるんだよなぁ？

対策としては，以下のように cdnjs.cloudflare.com で指定すればいいらしい。

<script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.js"></script>

強いて言えば cdn.jsdelivr.net の証明書を発行しているのが Cloudflare 社の中間 CA ってとこだが，それってブラウザ側の証明書ストアの問題なんじゃ…

まぁとにかく，現象が確認できない以上本ブログでは対応しないけど，見れない人が頻出するようなら考えます（笑）

MathJax のオプション

MathJax にはいくつかのオプションを設定できる。オプションの設定には <head> 要素内に以下のように MathJax インスタンスを作成する（スクリプトの順番に注意）。

<script>
MathJax = { ... };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

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

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

TeX Input Processor Options

設定項目と既定値は以下の通り。

MathJax = {
  tex: {
    inlineMath: [              // start/end delimiter pairs for in-line math
      ['\\(', '\\)']
    ],
    displayMath: [             // start/end delimiter pairs for display math
      ['$$', '$$'],
      ['\\[', '\\]']
    ],
    processEscapes: true,      // use \$ to produce a literal dollar sign
    processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
    processRefs: true,         // process \ref{...} outside of math mode
    digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
                               // pattern for recognizing numbers
    tags: 'none',              // or 'ams' or 'all'
    tagSide: 'right',          // side for \tag macros
    tagIndent: '0.8em',        // amount to indent tags
    useLabelIds: true,         // use label name rather than tag for ids
    multlineWidth: '85%',      // width of multline environment
    maxMacros: 1000,           // maximum number of macro substitutions per expression
    maxBuffer: 5 * 1024,       // maximum size for the internal TeX string (5K)
    baseURL:                   // URL for use with links to tags (when there is a <base> tag in effect)
       (document.getElementsByTagName('base').length === 0) ?
        '' : String(document.location).replace(/#.*$/, ''))
  }
};

inlineMath はインライン数式の開始・終了デリミタを指定する。複数列挙できる。

$\mathrm{\LaTeX}$ と同じく $...$ 記述を有効にしたいのであれば

inlineMath: [
  ['$', '$'],
  ['\\(', '\\)']
],

などとする。これで

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

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

と記述できる。

processEscapes を true にすると（既定値），上述の数式開始・終了デリミタを \ 記号でエスケープする³。たとえば $ 文字を表示する場合には \$ と記述すればよい。

tags で別行立て数式の採番を制御する。規定値の "none" では自動採番が無効になっている。ページ内の全ての別行立て数式に対して自動採番を有効にする場合は "all" をセットする。 "ams" をセットした場合の動作については第3回を参照のこと。

macros 項目を追加して自作のマクロを組み込むこともできる。こんな感じ⁴。

macros: {
  ssqrt: ['\\sqrt{\\smash[b]{\\mathstrut #1}}', 1]
}

これで

平方根の高さを揃えるには \mathstrut と \smash コマンドを使って $\ssqrt{g}$ と $\ssqrt{h}$ のように表示できる。

平方根の高さを揃えるには \mathstrut と \smash コマンドを使って $\ssqrt{g}$ と $\ssqrt{h}$ のように表示できる。

のように使うことができる。

CommonHTML Output Processor Options

設定項目と既定値は以下の通り。

MathJax = {
  chtml: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    matchFontHeight: true,         // true to match ex-height of surrounding font
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'center',        // default for indentalign when set to 'auto'
    displayIndent: '0',            // default for indentshift when set to 'auto'
    fontURL: '[mathjax]/components/output/chtml/fonts/woff-v2',   // The URL where the fonts are found
    adaptiveCSS: true              // true means only produce CSS that is used in the processed equations
  }
};

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

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

たとえば左寄せで2文字分インデントさせた場合は

MathJax = {
  chtml: {
    displayAlign: 'left',
    displayIndent: '2em'
  }
};

以下のように表示される。

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

SVG Output Processor Options

設定項目と既定値は以下の通り。

MathJax = {
  svg: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    matchFontHeight: true,         // true to match ex-height of surrounding font
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'center',        // default for indentalign when set to 'auto'
    displayIndent: '0',            // default for indentshift when set to 'auto'
    fontCache: 'local',            // or 'global' or 'none'
    localID: null,                 // ID to use for local font cache (for single equation processing)
    internalSpeechTitles: true,    // insert <title> tags with speech content
    titleID: 0                     // initial id number to use for aria-labeledby titles
  }
};

内容については前節とほぼ同じなので割愛する。なお matchFontHeight 項目については false にしても日本語の文章と上手くマッチしない。残念。

機能の拡張

たとえば physics 拡張を組み込む場合は以下のように記述する。

MathJax = {
  loader: {load: ['[tex]/physics']},
  tex: {
    packages: {
      '[+]': ['physics']
    },
    ...
  }
};

組み込み可能な拡張機能については以下のページを参照のこと。

The TeX/LaTeX Extension List — MathJax 3.0 documentation

ただし physics, colorV2 以外は標準で組み込まれているようで⁵，たとえば

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

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

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

Web フォントの指定

MathJax Font Support — MathJax 3.0 documentation

今のところ MathJax v3 の CDN では TeX フォントしか対応していない。将来バージョンで対応するとあるが，フォント群を指定する仕組みだけは用意されているようだ。

MathJax = {
  chtml: {
    fontURL: '[mathjax]/components/output/chtml/fonts/woff-v2' // The URL where the fonts are found
  }
};

ただ MathJax v3 で利用可能なフォント群を用意するのは（今のところ）簡単ではなさそうなので「今後に期待」といったところだろうか。

このサイトでの設定例

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

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
	processEscapes: true,
    tags: 'ams',
    macros: {
      ssqrt: ['\\sqrt{\\smash[b]{\\mathstrut #1}}', 1],
      tcdegree: ['\\unicode{xb0}'],
      tccelsius: ['\\unicode{x2103}'],
      tcperthousand: ['\\unicode{x2030}'],
      tcmu: ['\\unicode{x3bc}'],
      tcohm: ['\\unicode{x3a9}']
    }
  },
  chtml: {
    matchFontHeight: false,
    displayAlign: "left",
    displayIndent: "2em"
  }
};
</script>
<script id="MathJax-script" async src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

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

ブックマーク

参考図書

[改訂第8版]LaTeX2ε美文書作成入門: 奥村晴彦 (著), 黒木裕介 (著); 技術評論社 2020-11-14; 大型本; 4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN); 評価

2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。版元には PDF 版もある。

reviewed by Spiegel on 2021-09-05 (powered by PA-APIv5)

厳密には $\mathrm{\TeX}$ 記法ではなく $\mathrm{\LaTeX}$ 記法である。が，ここでは両者を区別することにあまり意味が無いので「$\mathrm{\TeX}$ 記法」で通すことにする。 ↩︎
$E=mc^2$ という入力に対して $E=mc^2$ と，各文字間を適切に空けたり詰めたりしてくれるのがお分かりだろうか。このように $\mathrm{\TeX}$ では数式を半自動的かつ適切に「組版」してくれるのが特徴である。ただし万能ではない。 ↩︎
processEscapes オプションを有効にすると $...$ までエスケープされてただの (...) になってしまうので注意すること。というか processEscapes オプションを有効にするなら $...$ は使わないほうがいいかも。また processEscapes オプションはパラグラフ <p>...</p> の中でのみ効いているようだ。 ↩︎
ssqrt マクロについては第3回で紹介している。 ↩︎
tex-chtml-full.js でフル機能を組み込んだ場合は physics, colorV2 も組み込まれるようだ。 ↩︎
「経済成長とCO2排出量は「比例しなくなっている」：IEA報告書」より。 ↩︎

ちょこっと MathJax： 初期設定

MathJax の組み込み

2020-09-25 追記

MathJax のオプション

TeX Input Processor Options

CommonHTML Output Processor Options

SVG Output Processor Options

機能の拡張

Web フォントの指定

このサイトでの設定例

ブックマーク

参考図書

ちょこっと MathJax：初期設定