MathJax
MathJax は数式を全てのブラウザで見られるように表示する JavaScript エンジンです。html ファイルの TeX 入力をパースして svg などの形式で出力できます。上位の Jupyter ノートブックはグラフの描画やインタラクティブなコードの実行をするのに MathJax などのモジュールに依存しています。
MathJax はあらゆるウェブサイトに簡単に埋め込んで TeX の活字を組むことができます。分散ネットワークサービスと MathJax を統合することも可能です。利用可能な CDN は こちら を参照してください。
この記事では CDN を使うのではなくシステムに MathJax をインストールします。
目次
インストールと設定
ローカルの使用方法
MathJax で ~/equations.html から TeX コードをパースして SVG 出力を生成するには:
<head>
...
<script ="/usr/share/mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
...
</head>
MathJax に入出力フォーマットを指定する設定クエリ文字列を必ず付けてください。
MathJax はインラインで設定することもできます。設定オプションについて詳しくは こちら を見てください。
ブラウザは file:///home/user/equations.html に記号をレンダリングします。
MathJax がデフォルトで使用する TeX の区切り文字はインラインの場合は \( ... \) 、アウトラインの場合は \[ ... \] , $$ ... $$ です。
サーバーの使用方法
MathJax で生成したドキュメントをクライアントに渡すために、メインファイルにアクセスするスクリプトが必要です: /usr/share/mathjax/MathJax.js。
サーバーのルートディレクトリが /srv/http/ の場合、シンボリックリンクを作成してスクリプトからインストールしたパッケージにアクセスできるようにしてください:
$ cp -rs /usr/share/mathjax /srv/http/mathjax
ヘッダーに以下を記述することで /srv/http/pages/equations.html で MathJax を使って TeX コードをパースできます:
<script src="../mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
トラブルシューティング
MathJax と Plotly
plotly.js も使用している場合、Plotly よりも先に MathJax をロードすると TeX コードの表示ができなくなることがあります。MathJax よりも前に Plotly をロードするようにしてください。例:
<head>
<script src="path-to-plotly/plotly-latest.min.js"></script>
<script src="path-to-mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
</head>
別の MathJax 出力を試してみることもできます。
ページのロード中に TeX のコードがそのまま表示される
MathJax が式を表示するまで時間がかかる場合、生の TeX コードがロード中に表示されます。
エレメントの css プロパティで visibility: hidden を設定して、表示が完了した後に MathJax のイベントを使って設定を解除することで解決できます:
MathJax.Hub.Queue( function () {
document.getElementById("myID").visibility = "visible";
});