ちょこっと MathJax: 初期設定

no extension

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

  1. ちょこっと MathJax: 初期設定 ← イマココ
  2. ちょこっと MathJax: 基本的な数式表現
  3. ちょこっと MathJax: インライン数式と別行立て数式
  4. ちょこっと MathJax 番外編: mathcomp パッケージの代替え

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

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

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

と書くとブラウザ側では

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

と適切に表示してくれる2

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

MathJax の組み込み

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

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

<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>

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

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

なお 2019-09-28 時点の最新バージョンは 3.0.0 である。

プロトコルは HTTPS のみで HTTP を明示的に指定しても HTTPS にリダイレクトされるようだ。 最近のブラウザは HTTP と HTTPS が混在するページでは(セキュリティの関係で)上手く表示できない場合があるので注意が必要である。

組み込む 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 による入力は本記事では割愛する。

MathJax のオプション

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

<script>
MathJax = {
  ...
};
</script>
<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>

{ ... } の部分に具体的なオプションを記述していく。 全部を説明するのは大変なので,よく使いそうなものを幾つか紹介しよう。 なお,最後の節本ブログにおけるオプションの設定例を挙げているので,以降の解説がウザい方は丸写しでも 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$ の関係がある。

と記述できる。

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

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

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

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'
  }
};

matchFontHeighttrue であれば本文の文字の大きさにマッチするよう数式の文字の高さを調節してくれるが,本文が日本語だと却ってバランスが悪いようだ。 したがって 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']
    },
    ...
  }
};

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

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

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

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

Web フォントの指定

今のところ MathJax v3 では TeX フォントしか対応していない。 将来バージョンで対応するとある。

このサイトでの設定例

以上を踏まえて,本ブログにおける 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 src="//polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

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

ブックマーク

参考図書

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

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

reviewed by Spiegel on 2017-09-27 (powered by PA-APIv5)


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