gilberthouse.math › MathJaxの使い方

MathJaxの使い方

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

公開日：2014年9月7日

更新日：2017年5月8日

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

■目次

MathJaxとは何ぞや？
早速使ってみよう！
- MathJaxの読み込み
- インライン数式とディスプレイ数式
- 簡単な式の例
カスタマイズする
- ディスプレイ数式を左寄せする
- タグ（式番号）を左側につける
- 自動ナンバリング
- タグを[～]で表示する
- 数式用フォントあれこれ
数式を書く
- 不等号についての注意
- マクロ機能
- タグ（式番号）
関連リンク集

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;、>）で書いても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}

△