gilberthouse.math › MathJaxの使い方

MathJaxの使い方

 Web技術の進歩とその貢献者に感謝を込めて。

公開日:2014年9月7日

更新日:2017年5月8日

執筆時点のバージョン:MathJax v2.7.1

■目次

MathJaxとは何ぞや?

 MathJaxは高品質な数式の整形・表示を実現する、オープンソースのJavaScriptライブラリです。すべてのモダンブラウザ(モバイル版含む)で動作します。クライアント側の事前準備(プラグインのインストール、ブラウザの設定、etc.)は一切不要です。

 MathJaxは数式用のWebフォントを使って数式をタイプセットします。画像化する方式と違いテキストベースなので、拡大したり高解像度で印刷しても鮮明さが損なわれません。また、検索性の高さなどのメリットがあります。

 MathJaxの配布ライセンスはApache License, Version 2.0です。ここではライセンスについての説明は割愛……。

早速使ってみよう!

 手っ取り早いのは、MathJax CDNサービス(cdn.mathjax.org)から最新版を読み込む方法です。2017年4月をもって廃止に。

 [2017年5月8日追記]廃止案内で推奨されているcdnjs(cdnjs.cloudflare.com)に書き換えました。5月8日現在、cdn.mathjax.orgはcdnjsにリダイレクトされて一見問題なく見えますが、これは一時的な措置(temporary stopgap)ということなので、速やかに移行をおすすめします!

 この場合、設置作業の手間がかからないのに加えて、バグ修正や実行速度の改善などを迅速に反映させられます。(自前のスペースに設置する方法もあります。)

MathJaxの読み込み

 まず、HTML文書の<head>...</head>内に次のコードを追加します。

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML">
</script>

 configパラメータの「TeX-AMS_CHTML」は、TeX形式で入力(認識)して、HTML形式で出力(表示)することを表します。

 TeX以外にもMathMLとAsciiMathの入力形式があります。すべて認識させる場合は「TeX-MML-AM_CHTML」、その他の設定は設定ファイル一覧をご覧ください。

 MathJax v2.6から、従来のHTML-CSS出力より4割ほど高速らしいCommonHTML出力が推奨となりました。見栄えの一貫性でも改善があるので、古い「TeX-AMS_HTML」から「TeX-AMS_CHTML」に変えるといいかもしれません。(Webフォントを変更できないのが唯一のデメリット?)

 なお、読み込みはHTTP接続も可能ですが、近頃はHTTPSの方が速いという話もあるのでHTTPS接続をおすすめします。

インライン数式とディスプレイ数式

 次に、文書内の数式部分を\(...\)または\[...\]で囲って指定します。UTF-8など「半角\」と「半角¥」を区別する文字コードのときは「半角\」が正解。

 \(...\)で囲った部分はインライン数式、\[...\]で囲った部分は別行立てのディスプレイ数式として認識されます。

 初期設定では$...$方式のインライン数式は使えません。英文中にドル記号がよく表れるのに配慮したとのことですが、「不便でストレスがたまる!」という場合は、次のように設定コードを追加して有効化できます。(ドル記号は\$のようにエスケープする。)

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ],
    processEscapes: true
  }
});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML">
</script>

簡単な式の例

例)オイラーの公式

\[
  e^{i\theta} = \cos\theta + i\sin\theta
\]
\[ e^{i\theta} = \cos\theta + i\sin\theta \]

例)式にタグをつける

\[
  a + b = c + d \tag{A}
\]
\[ a + b = c + d \tag{A} \]

カスタマイズする

 MathJaxをカスタマイズするコードの例は次の通り。

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

 この「text/x-mathjax-config」ブロックは、MathJaxの読み込みより前に置く約束です。そうしなければMathJax起動時に内容が適用される保証はありません。

 以下、いくつか設定オプションを挙げていきます。

ディスプレイ数式を左寄せする

MathJax.Hub.Config({
  displayAlign: "left"
});

タグ(式番号)を左側につける

MathJax.Hub.Config({
  TeX: {
    TagSide: "left",
  }
});

自動ナンバリング

MathJax.Hub.Config({
  TeX: {
    equationNumbers: {
      autoNumber: "AMS"
    }
  }
});

タグを[〜]で表示する

MathJax.Hub.Config({
  TeX: {
    equationNumbers: {
      formatTag: function (n) {return '['+n+']'}
    }
  }
});

数式用フォントあれこれ

 執筆時点のバージョン(v2.6)では、CommonHTML出力は数式用フォントの変更に対応していません。そのうち対応すると思いますが、それまでは従来のHTML-CSS出力かSVG出力を選択することになります。

 (HTML-CSS出力は、読み込みでconfigパラメータに「TeX-AMS_HTML」を指定するとできます。)

例)ローカルのSTIXフォントを優先、WebフォントもSTIX

MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: ["STIX"],
    preferredFont: "STIX",
    webFont: "STIX-Web"
  }
});

例)「数学ガール」でお馴染みのEulerフォント

MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: [],
    preferredFont: null,
    webFont: "Neo-Euler"
  }
});

数式を書く

不等号についての注意

 数式内の不等号がHTMLタグの開始・終了に誤解釈(否、正しく解釈)されないようにしましょう。

例)これはNG

$a<b$

 HTMLの文字参照(&lt;、&gt;)で書いてもOKですが、定義済みのマクロ(\lt\gt)を使って書くとすっきりします。

$a \lt b$

マクロ機能

 マクロを定義するには次の通り。

MathJax.Hub.Config({
  TeX: {
    Macros: {
      RR: '{\\bf R}',
      sinc: '\\mathop{\\rm sinc}',
      abs: ['\\lvert #1 \\rvert', 1]
    }
  }
});

 引き数つきのマクロ(上のコードでは\abs)を定義するときは、[value, n]のようにリストの形で引き数の個数をあわせて記述します。

 (JavaScriptの文法上、文字列リテラルに含まれる\はエスケープが必要。)

例)マクロを使用する

\[
  \sinc x = \frac{\sin x}{x}
\]

\[
  \abs{a + b} \leq \abs{a} + \abs{b}
\]
\[ \sinc x = \frac{\sin x}{x} \] \[ \abs{a + b} \leq \abs{a} + \abs{b} \]

タグ(式番号)

 式の自動ナンバリングは初期設定で有効になっていないので、必要に応じて適宜有効化しましょう。

 式番号がつくのはequation環境やalign環境などで、\[...\]は対象外です。

MathJax.Hub.Config({
  TeX: {
    equationNumbers: {
      autoNumber: "AMS"
    }
  }
});

 これでalign環境での数式に(1), (2)...と式番号が振られます。

例)align環境の場合

\begin{align}
  \overline{x} &= \frac{x_1 + x_2 + \cdots + x_n}{n} \\
  &= \frac{1}{n} \sum_{k = 1}^n x_k
\end{align}
\begin{align} \overline{x} &= \frac{x_1 + x_2 + \cdots + x_n}{n} \\ &= \frac{1}{n} \sum_{k = 1}^n x_k \end{align}

例)\notagで式番号を消去、\tagで上書き

\begin{align}
  \overline{x} &= \frac{x_1 + x_2 + \cdots + x_n}{n} \notag \\
  &= \frac{1}{n} \sum_{k = 1}^n x_k \tag{$*$}
\end{align}
\begin{align} \overline{x} &= \frac{x_1 + x_2 + \cdots + x_n}{n} \notag \\ &= \frac{1}{n} \sum_{k = 1}^n x_k \tag{$*$} \end{align}
戻る