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="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>

2017年4月3日：cdn.mathjax.org のサービスは2017年4月30日に停止します。詳しくは MathJax CDN shutting down on April 30, 2017 (March 31, 2017)を参照して下さい。

注意：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="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

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

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

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

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

くろきげんのFC2ブログ (MathJaxを使ったブログの例)
くろきげんのライブドアブログ (MathJaxを使ったブログの例、ラブドアブログは結構使い易い)
くろきげんのSo-netブログ (MathJaxを使ったブログの例、So-netブログも結構使い易さそう)
くろきげんのBloggerブログ (MathJaxを使ったブログの例)
くろきげんのppBlog (Xreaに設置、ppBlogでMathJaxを使う方法)

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

三中信宏さんの日録：MathJaxの紹介
いくらなんでも幾何 (So-netブログ)
A Puzzler on the Trail (blogspot.com)
松木平淳太のblog (livedoor blog)
調べはアマリリス@月之桂 (livedoor blog、iPhoneから数式入力！)
木のおさら (livedoor blog)

設定とマクロの共有

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

<script type="text/javascript"
  src="http://domain/dir/MathJax/MyConfig.js"></script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>

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

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

例：数式中の などは無視される

$ \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 
\]
$ \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) を使っているからでしょう。 ChromePlus や Firefox のような他のブラウザを使いましょう。最新のブラウザの中では 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 を使えるようになるかがわかるはずである。

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

ppBlog の吐く HTML ファイルのヘッダー内に MathJax.js を読み込むスクリプトが追加されるようにする。
ppBlog の php ファイルではバックスラッシュのエスケープ先として ¥ が使われているがそれらをすべて \ (バックスラッシュ) に変更する。 LaTeX のコマンドの頭文字は円マークではなくバックスラッシュなので、 LaTeX のコマンドを MathJax に認識してもらうためにはこの変更が必須になる。 (UTF-8 では円マークとバックスラッシュが区別される。)
MathJax を適切なタイミングで動かすように js/ 以下のファイルを修正する。この修正がなくても記事内の LaTeX コマンドが MathJax で数式に変換されるようになるのだが、プレビューなどでも数式に変換されるようにするためにはこの修正が必要になる。私が採用した方法は The MathJax Processing Queue に書いてある。

設置の例

くろきげんのppBlog (Xreaに設置)

Question2AnswerでMathJaxを使う方法

2011年03月14日版

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

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

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

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="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

qa-plugin/wysiwyg-editor/ckeditor.js をいじってプレビュー画面でも MathJax を使うように設定する。
qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php を書き換えて編集フォームのツールバーにプレビューボタンが出るようにする。さらに Enter で改行( )、Shift+Enter で段落(～) を使うように設定する。 (注意： MathJax では数式の中で は無視されるので、数式中に無駄に が挿入されても害がない。)
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="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
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="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

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

リンク集

MathJax Official Site
MathJax Documentation (MathJaxの解説、懇切丁寧な説明でわかりやすい)
- MathJax v1.1 Documentation
  - Using MathJax v1.1 in popular web platforms (WordPress, Movable Type, etc.)
MathJax を含む日本語のページを検索
黒木玄のウェブサイトでも MathJax を使っている。
- 量子 dilogarithm 恒等式の作り方 (MaghJaxの使用例)

MathJax とは無関係のリンク

囲碁

Master60all.pdf、Master60fuseki.pdf
Riryo20170124-20170126.pdf、Riryo20170124-20170126.zip (zipped sgf fies)

数学

20160501StirlingFormula.pdf
20160616KullbackLeibler.pdf
これらの最新版は http://www.math.tohoku.ac.jp/~kuroki/LaTeX/#misc に置いてある。

MathJaxの使い方

要約

目次

MathJaxで何ができるか

MathJaxのインストール

リアルタイムプレビュー

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