MathJaxの使い方

くろきげん (ブログツイッター)

更新:2011年3月27日 (要約を追加)

要約

簡単な使い方:次を HTML ファイルの <head></head> のあいだに挿入する。それだけで LaTeX 方式で数式を書けるようになる。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

最も簡単な使い方:次を HTML ファイル中の <head></head> のあいだに挿入する。それだけで LaTeX 方式で数式を書けるようになる。ただし $ $ は使えない。

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

文字集合が UTF-8 としてある場合にはバックスラッシュと円マークの違いに注意すること。円マークだと MathJax で数式に変換されない。

目次

MathJaxで何ができるか

HTML の中に MathJax を使うための設定を書き込み、その中で LaTeX のコマンドで数式を記述すると、その HTML ファイルをブラウザで見たときに LaTeX のコマンドで書かれた部分が自動的にきれいな数式に置き換わる。ブラウザ側の設定は何も必要ない。 HTML の中にあるコードを埋め込んでおくだけでよい。

このファイルも数式を MathJax を使って表示するようにしてある。

MathJaxのインストール

MathJaxのファイル群のインストールは必要ない。

もしも自前の MathJax サーバーを用意したかったり、オフネットでも使いたいならば Installing Your Own Copy of MathJax の指示にしたがうべし。

自前のサーバーにインストールする場合のヒント:MathJax のパッケージには3万個程度の PNG ファイルのイメージフォントが含まれている。古いブラウザで数式を表示できなくても構わないならばそれらの3万個程度の PNG ファイルを削除しても構わない。そのために、まず MathJax/fonts/ 以下にある PNG ファイルをすべて検索してリストアップし、それらをすべて削除する。その後にウェブサーバーのしかるべき場所にアップロードしたり、コピーしたりすればよい。 3万個ものファイルをコピーしたりアップロードしたりするのは非常に大変なので、避けた方がいいでしょう。 (もしもアップロード先でアーカイブを展開できるならば、アップロードしてから展開した方が速い。)

リアルタイムプレビュー

MathJaxをリアルタイムでプレビュー

色々打ち込んで試してみれば MathJax が大体どういうものかがわかるはず。

MathJaxはすでに有力な標準仕様

世界最大の数学論文データベース MathSciNet (Examples: 1, 2, 3) は MathJax を採用した。ここで MathJax が採用されたということは少なくとも数学研究の世界ではウェブでの数式表示に関して MathJax が標準になったことを意味している。これからは数式も書けるサイトであることを売りにしたいならば MathJax への対応は必須になったと考えられる。

Project Euclid も MathJax を採用しました (Project Euclid、オンライン上の"美しい数学"を後押し)。

MathJax のスポンサーは the American Mathematical Society, Design Science, Inc., and the Society for Industrial and Applied Mathematics である。それらの有力な団体がインターネット上で標準的に使うために MathJax の開発にお金を出している。さらにサポーターは the American Physics Society, Elsevier, and Project Euclid である。

MathOverflow (MathJaxを使った専門的な数学の質問掲示板) でも MathJax を使っている。

日本語圏 MathJax は十分に普及していないが、 MathOverflow のような StackOverflow 系のQ&Aサイトでは MathJax (もしくはそのもとになった jsMath) が十分に普及していて、エンジニア、数学者、物理学者のような数学を使う科学者、などなどが活発にかつ気軽に情報交換している。日本語圏でも MathJax はもっと普及した方が良いと思う。

MathJaxの使い方

このファイルのヘッダーを真似して HTML ファイルを作る。これでその HTML ファイルの中で $ $\( \)$$ $$\[ \] で囲んで LaTeX 方式で数式を書けるようになる。

注意:文字集合を charset=UTF-8 とする場合には円マークとバックスラッシュが異なることに注意せよ。文字集合として charset=Shift_JIS や charset=EUC-JP や charset=ISO-2022-JP を使えば円マークとバックスラッシュの違いに悩まされずにすむ。

このファイルのヘッダーの中の MathJax 関係の記述について説明しよう。

次の3行をヘッダーに入れるだけで MathJax を使えるようになる。

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

cdn.mathjax.org のサービス利用規約については MathJax CDN Terms of Service を見よ。

注意:config=... の部分を config=TeX-AMS-MML_HTMLorMML に置き換えたら、 \tag{} で式番号を入れることができなくなってしまった。これは仕様なのかバグなのかまだよく理解できていない。

このファイル内だけで通用するローカルな設定は次の通り。

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

tex2jax: 内の inlineMath の設定がないと $ $ を使えなくなる。 $$ $$ を使えなくしたければ displayMath の設定からそのための記述を削除すればよい。

次の行は Microsoft IE8 対策である。 IE8 を無視して構わないならば省略して構わない。

<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

この記述があっても IE8 による数式の表示は遅い。当面のあいだは他のブラウザを使ってもらうしかないだろう。

参考:すでに数学の研究者のあいだでは MathJax が不自由なく使えるブラウザ (実際には IE 以外の任意のブラウザ) が不可欠な道具になっている。なぜならば世界最大の数学論文データベース MathSciNet (Examples: 1, 2, 3) が MathJax を使うようになったからである。すでに MathJax を採用している数学関係の有力なサイトはたくさんある。すでに MathJax はウェブでの数式の表示に関するスタンダードになったと考えられる。 IE8 での数式の表示が遅いという理由で MathJax の採用を躊躇すると時代に乗り遅れることになってしまうだろう。

ブログなどでの設定

ブログなどで MathJax を使いたければ以下のコードをテンプレートのヘッダに貼り付ければよい。たったそれだけで設定は終わり。FC2ブログとライブドアブログとSo-netブログでは可能なことを確認してある。他にも便利 MathJax が使える無料ブログは結構あるようだ。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

$ $ も IE8 対策も必要ないのであれば次の3行だけで十分である。

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

無料ブログなどのサンプル

個人的には各種無料ブログが最初からMathJax対応になってくれるとうれしいと思っています。写真や音楽や動画をブログに貼り付けられるだけだと不十分であり、数式も当然使えるのが当然という風になって欲しいものです。

以下はいち早くMathJaxをブログなどで使い始めた方々です。

設定とマクロの共有

設定とマクロが書かれたファイル MyConfig.js を用意しておき、次のようにして読み込めば複数の HTML ファイルで同じ設定とマクロを共有できる。

<script type="text/javascript"
  src="http://domain/dir/MathJax/MyConfig.js"></script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

MathJax のデフォルトの設定からの差分を MyConfig.js に書いておくならば config=TeX-AMS_HTML の部分を config=default とすればよい。 (個人的に TeX-AMS_HTML の設定はかなり使い易いと思っている。)

MyConfig.js の中身は次のような感じにする。

MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
  },
  TeX: {
    Macros: {
      C: '{\\mathbb C}',
      R: '{\\mathbb R}',
      Q: '{\\mathbb Q}',
      Z: '{\\mathbb Z}',
      diag: '\\mathop{\\mathrm{diag}}\\nolimits',
      np: ['{#1}#2{#1}', 2]
    }
  }
});

例:MyConfig-example.html

数式の書き方の例

例:inlineMath

デフォルトの設定では \( \) のみが使用できるが、このファイルでは $ $ も使えるようにしてある。 $ $ がデフォルトの設定で使えないようにしてある理由は米語の文書に $ が頻出するからである。日本語で書く場合には $ $ も使えた方が便利だと思う。

\(\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}\)

\(\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}\)

例:displayMath

式番号は \tag{ } で入れられる。

\[
  \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
  \tag{3}
\]

\[ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} \tag{3} \]

式番号の自動生成およびラベルを使った引用には現時点では対応していない。しかし開発陣は対応するつもりのようである。

例:AMSmath

\begin{align*}
 A & = B \\
   & = C \\
   & = D.
\end{align*}

\begin{align*} A & = B \\ & = C \\ & = D. \end{align*}

例:AMSsymbols

$Q_1\boxtimes Q_2$, $\because$, $\dfrac12$, $\hslash$, $O(3)\ltimes{\mathbb R}$

$Q_1\boxtimes Q_2$, $\because$, $\dfrac12$, $\hslash$, $O(3)\ltimes{\mathbb R}^3$

例:タイポ

\[ \sym_{n=1}^\infty \frac{1}{n^2} = \frac{\po^2}{6} \]

\[ \sym_{n=1}^\infty \frac{1}{n^2} = \frac{\po^2}{6} \]

例:マクロ

マクロを $ $$$ $$ などの中で定義できる。

$$
  \newcommand\C{{\mathbb C}}
  \newcommand\np[2]{{#1}#2{#1}}
  \C[y_1,\ldots,y_n]\to {\mathcal A}, \quad a\mapsto\np{:}{a}
$$

$$ \newcommand\C{{\mathbb C}} \newcommand\np[2]{{#1}#2{#1}} \C[y_1,\ldots,y_n]\to {\mathcal A}, \quad a\mapsto\np{:}{a} $$

例:数式中の<br />などは無視される

\( \exp x = 1 + x + x^2/2 + x^3/6 + \cdots \)
\( \exp x = 1 + x + x^2/2<br /> + x^3/6 + \cdots \) \[ \exp x = 1 + x + x^2/2 + x^3/6 + \cdots \]<br /> \[<br /> \exp x = 1 + x + x^2/2 + x^3/6 + \cdots<br /> \]

\( \exp x = 1 + x + x^2/2 + x^3/6 + \cdots \)
\( \exp x = 1 + x + x^2/2
+ x^3/6 + \cdots \) \[ \exp x = 1 + x + x^2/2 + x^3/6 + \cdots \] \[
\exp x = 1 + x + x^2/2 + x^3/6 + \cdots
\]

トラブル対策

数式が正しく表示されない場合

上の例で数式が正しく表示されない場合には ChromePlus のような他のブラウザを使ったり、 STIXフォントをOSにインストールすることを試してみるべし。

個人的には数式の表示が速くなるのでSTIXフォントをインストールしておくことをおすすめする。インストールの方法は MathJax Font Help に書いてある。

Ajax を使っている場合にはどのタイミングでどのように MathJax を動作させるかが難しくなるので注意するべし。

数式の表示があまりにも遅い場合

おそらく Microsoft Internet Explorer 8 (IE8) を使っているからでしょう。 ChromePlusFirefox のような他のブラウザを使いましょう。 最新のブラウザの中では IE8 だけが飛び抜けて遅い。 ChromePlus や Firefox なら瞬時に数式が表示されるのに、IE8 だと1分以上かかることがある。どうしても IE8 を使い続けたいならば Microsoft 社に改善を強く要求した方が良いでしょう。ユーザーの声はソフトの改善のために重要だと思います。

ppBlogでMathJaxを使う方法

ppBlog (download: 1.8.8, 1.8.8safemode) は kikulog などで採用されているブログソフトである。私もいつか使うかもしれないと考え、 ppBlog で MathJax を使えるようにしてみた。変更が必要な点については次の差分ファイルを見よ。

ppBlog-1.8.8 への MathJax 対応差分ファイル

注意:この差分ファイルには MathJax とは関係ない部分も含まれている。しかしこれを見ればどこをどのように変更すれば ppBlog で MathJax を使えるようになるかがわかるはずである。

変更のポイントは以下の通りである。

  1. ppBlog の吐く HTML ファイルのヘッダー内に MathJax.js を読み込むスクリプトが追加されるようにする。

  2. ppBlog の php ファイルではバックスラッシュのエスケープ先として &yen; が使われているがそれらをすべて &#92; (バックスラッシュ) に変更する。 LaTeX のコマンドの頭文字は円マークではなくバックスラッシュなので、 LaTeX のコマンドを MathJax に認識してもらうためにはこの変更が必須になる。 (UTF-8 では円マークとバックスラッシュが区別される。)

  3. MathJax を適切なタイミングで動かすように js/ 以下のファイルを修正する。この修正がなくても記事内の LaTeX コマンドが MathJax で数式に変換されるようになるのだが、プレビューなどでも数式に変換されるようにするためにはこの修正が必要になる。私が採用した方法は The MathJax Processing Queue に書いてある。

設置の例

Question2AnswerでMathJaxを使う方法

2011年03月14日版

Question2Answer (以下 Q2A) は PHP と MySQL で動く、 StackOverflow クローンである。 Q2A を MathJax 対応に改造すれば MathOverflow に類似のサイトを構築できるだろう (ライブドアブログでの記事)。

Q2A-1.3.1 への MathJax 対応差分ファイル

変更したところは以下の通り。

  1. Q2A の管理者メニューで Layout → Custom HTML in <HEAD> section of every page: に次を書き込む (これは差分ファイルには含まれていない):

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
    </script>
    <script type="text/javascript"
      src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
    </script>
    <meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />
  2. qa-plugin/wysiwyg-editor/ckeditor.js をいじってプレビュー画面でも MathJax を使うように設定する。

  3. qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php を書き換えて編集フォームのツールバーにプレビューボタンが出るようにする。さらに Enter で改行(<br />)、Shift+Enter で段落(<p>〜</p>) を使うように設定する。 (注意: MathJax では数式の中で <br /> は無視されるので、数式中に無駄に <br /> が挿入されても害がない。)

  4. qa-plugin/wysiwyg-editor/skins/v2/editor.css を書き換えてプレビューボタンがより目立つようにする。 (数式だけは WYSIWIG にならないので、プレビューボタンの役割は大きい。数式も WYSIWIG になればプレビューボタンの役割は小さくなる。しかし現時点でそれは難しいようだ。)

どなたか MathOverflow のようなサイトを開設しませんか?

2011年03月16日版:リアルタイムプレビュー

Q2A 1.3.1 の MathJax 対応を完全にやり直した。質問と回答の入力を HTML の直入力にし、リアルタイムプレビュー (live preview) ができるようにした。次の ZIP ファイルがその作業の結果である。

Q2A-MathJax.zip

README-j.html の内容

### Question2Answer の MathJax 対応 ###

このアーカイブに含まれるファイルに著作権は主張しない。
道端に落ちている石ころと同じ扱いでかまわない。
それらのファイルの内容は無保証である。
内容を確認して自己責任で使って欲しい。

## インストールの仕方 ##

Question2Answer のバージョンは 1.3.1 であると仮定し、
Q2A をインストールしたフォルダは /qa であると仮定する。

1. qa-theme/DEFAULTS/qa-theme.php を /qa/qa-theme/DEFAULTS/qa-theme.php 
にコピーすると

(1) LaTeX 方式で数式を書くとMathJaxできれいな数式に変換されるようになり、
(2) Basic editor でリアルタイムプレビューが使えるようになる。

リアルタイムプレビューがうざいならば qa-theme.php から関連の記述を削除する。
そのためには jquery 関係と previewArea 関係の記述を消せば良い。

2. qa-theme/DEFAULTS/qa-styles.css を /qa/qa-theme/DEFAULTS/qa-styles.css
に上書きすると、少しだけ質問や回答の表示の幅が大きくなる。質問や回答を入力
するテキストエリアの幅も広がる。

3. qa-plugin/html-editor/ 以下を /qa/qa-plugin/html-editor/ 以下に
コピーすると、新しいエディター HTML Editor を選択できるようになる。
HTML Editor は本質的に Basic editor と同じもので、
余計な変換をせずに HTML を直接入力できるように変更しただけ。
qa_html_sanitize() してあるので危ないタグは削除される。

上のリアルタイムプレビューは打ち込んだ内容を単純に HTML で表示しているだけ
なので HTML editor を使わないとプレビューと実際の投稿結果が違った結果に
なってしまう。

HTMLに不慣れなユーザーのために「段落の最初に <p> を入れて欲しい」というような
コメントを表示するようにしておいた方が親切かもしれない。 <p> だけがあれば
段落の終わりの </p> は自動的に挿入される。

## 更新 ##

# 2011年03月16日 #

最初のバージョン。

# 2011年03月17日 #

qa-theme/DEFAULTS/qa-theme.php で textarea に挿入するテキストを qa_html()
で < > & などをエスケープするようにした。

HikiでMathJaxを使う方法

Hikiがすでにインストールされていると仮定する。

Hikiヘッダ挿入プラグインのページからinsert_header.rbをダウンロードして、Hikiで使っている文字コードに変換し、Hiki をインストール先の misc/plugin/ の下にコピーする。

Hikiの管理画面のプラグイン選択で insert_header.rb にチェックを入れてOKボタンを押す。

管理画面でヘッダ追加プラグインのメニューを選択し、以下をテキストエリアに書き込み、OKボタンを押す。

mathjax <script type="text/x-mathjax-config">
mathjax   MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
mathjax </script>
mathjax <script type="text/javascript"
mathjax   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
mathjax </script>
mathjax <meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

MaghJax を使いたいページには {{header mathjax}} と書き込む。これでそのページのヘッダには MathJax を読み込むコードが追加されるようになる。

tDiaryでMathJaxを使う方法

tDiaryがすでにインストールされていると仮定する。

tDiaryのインストール先の skel/header.rhtml の </head> の直前に以下を追加する(実際にはヘッダ内ならどこに追加してもよい)。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

これで MathJax が使えるようになる。

リンク集

MathJax とは無関係のリンク