MathJax

提供: ArchWiki
移動先: 案内検索

MathJax は数式を全てのブラウザで見られるように表示する JavaScript エンジンです。html ファイルの TeX 入力をパースして svg などの形式で出力できます。上位の Jupyter ノートブックはグラフの描画やインタラクティブなコードの実行をするのに MathJax などのモジュールに依存しています。

MathJax はあらゆるウェブサイトに簡単に埋め込んで TeX の活字を組むことができます。分散ネットワークサービスと MathJax を統合することも可能です。利用可能な CDN は こちら を参照してください。

この記事では CDN を使うのではなくシステムに MathJax をインストールします。

インストールと設定

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";
});