2017年6月10日：http://genkuroki.web.fc2.com/ からこちらに引っ越した。
2017年4月3日：cdn.mathjax.orgではなく、cdnjs.cloudflare.com/ajax/libs/mathjax を使うように変更した。
簡単な使い方：次を HTML ファイルの <head> と </head> のあいだに挿入する。それだけで LaTeX 方式で数式を書けるようになる。
<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" />
最も簡単な使い方：次を HTML ファイル中の <head> と </head> のあいだに挿入する。それだけで LaTeX 方式で数式を書けるようになる。ただし $ $ は使えない。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"> </script>
文字集合が UTF-8 としてある場合にはバックスラッシュと円マークの違いに注意すること。円マークだと MathJax で数式に変換されない。
HTML の中に MathJax を使うための設定を書き込み、その中で LaTeX のコマンドで数式を記述すると、その HTML ファイルをブラウザで見たときに LaTeX のコマンドで書かれた部分が自動的にきれいな数式に置き換わる。ブラウザ側の設定は何も必要ない。 HTML の中にあるコードを埋め込んでおくだけでよい。
このファイルも数式を MathJax を使って表示するようにしてある。
MathJaxのファイル群のインストールは必要ない。
もしも自前の MathJax サーバーを用意したかったり、オフネットでも使いたいならば Installing Your Own Copy of MathJax の指示にしたがうべし。
自前のサーバーにインストールする場合のヒント：MathJax のパッケージには3万個程度の PNG ファイルのイメージフォントが含まれている。古いブラウザで数式を表示できなくても構わないならばそれらの3万個程度の PNG ファイルを削除しても構わない。そのために、まず MathJax/fonts/ 以下にある PNG ファイルをすべて検索してリストアップし、それらをすべて削除する。その後にウェブサーバーのしかるべき場所にアップロードしたり、コピーしたりすればよい。 3万個ものファイルをコピーしたりアップロードしたりするのは非常に大変なので、避けた方がいいでしょう。 (もしもアップロード先でアーカイブを展開できるならば、アップロードしてから展開した方が速い。)
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 系のＱ＆Ａサイトでは MathJax (もしくはそのもとになった jsMath) が十分に普及していて、エンジニア、数学者、物理学者のような数学を使う科学者、などなどが活発にかつ気軽に情報交換している。日本語圏でも 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対応になってくれるとうれしいと思っています。写真や音楽や動画をブログに貼り付けられるだけだと不十分であり、数式も当然使えるのが当然という風になって欲しいものです。
以下はいち早くMathJaxをブログなどで使い始めた方々です。
設定とマクロが書かれたファイル 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]
}
}
});
デフォルトの設定では \( \) のみが使用できるが、このファイルでは $ $ も使えるようにしてある。 $ $ がデフォルトの設定で使えないようにしてある理由は米語の文書に $ が頻出するからである。日本語で書く場合には $ $ も使えた方が便利だと思う。
\(\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}\)\(\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}\)
式番号は \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} \]
式番号の自動生成およびラベルを使った引用には現時点では対応していない。しかし開発陣は対応するつもりのようである。
\begin{align*} A & = B \\ & = C \\ & = D. \end{align*}\begin{align*} A & = B \\ & = C \\ & = D. \end{align*}
$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<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) を使っているからでしょう。 ChromePlus や Firefox のような他のブラウザを使いましょう。 最新のブラウザの中では IE8 だけが飛び抜けて遅い。 ChromePlus や Firefox なら瞬時に数式が表示されるのに、IE8 だと1分以上かかることがある。どうしても IE8 を使い続けたいならば Microsoft 社に改善を強く要求した方が良いでしょう。ユーザーの声はソフトの改善のために重要だと思います。
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 に書いてある。
設置の例
Question2Answer (以下 Q2A) は PHP と MySQL で動く、 StackOverflow クローンである。 Q2A を MathJax 対応に改造すれば MathOverflow に類似のサイトを構築できるだろう (ライブドアブログでの記事)。
変更したところは以下の通り。
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 で改行(<br />)、Shift+Enter で段落(<p>～</p>) を使うように設定する。 (注意： MathJax では数式の中で <br /> は無視されるので、数式中に無駄に <br /> が挿入されても害がない。)
qa-plugin/wysiwyg-editor/skins/v2/editor.css を書き換えてプレビューボタンがより目立つようにする。 (数式だけは WYSIWIG にならないので、プレビューボタンの役割は大きい。数式も WYSIWIG になればプレビューボタンの役割は小さくなる。しかし現時点でそれは難しいようだ。)
どなたか MathOverflow のようなサイトを開設しませんか？
Q2A 1.3.1 の MathJax 対応を完全にやり直した。質問と回答の入力を HTML の直入力にし、リアルタイムプレビュー (live preview) ができるようにした。次の 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がすでにインストールされていると仮定する。
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がすでにインストールされていると仮定する。
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 とは無関係のリンク
囲碁