MathJaxのソースを表示

[[category:計算と科学]]
[[en:Mathjax]]
[https://www.mathjax.org MathJax] は数式を全てのブラウザで見られるように表示する JavaScript エンジンです。html ファイルの [[Wikipedia:TeX|TeX]] 入力をパースして svg などの形式で出力できます。上位の [[Jupyter|Jupyter ノートブック]]はグラフの描画やインタラクティブなコードの実行をするのに MathJax などのモジュールに依存しています。

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

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

== インストールと設定 ==

{{pkg|mathjax}} パッケージを[[インストール]]してください。
 
=== ローカルの使用方法 ===

MathJax で {{ic|~/equations.html}} から TeX コードをパースして SVG 出力を生成するには:

 <head>
     ...
     <script ="/usr/share/mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
     ...
 </head>

MathJax に入出力フォーマットを指定する設定クエリ文字列を必ず付けてください。

MathJax はインラインで設定することもできます。設定オプションについて詳しくは [http://docs.mathjax.org/en/latest/config-files.html#common-configurations こちら] を見てください。

ブラウザは {{ic|file:///home/user/equations.html}} に記号をレンダリングします。

MathJax がデフォルトで使用する TeX の区切り文字はインラインの場合は {{ic| \( ... \) }}、アウトラインの場合は {{ic| \[ ... \] }}, {{ic| $$ ... $$}} です。

=== サーバーの使用方法 ===

MathJax で生成したドキュメントをクライアントに渡すために、メインファイルにアクセスするスクリプトが必要です: {{ic|/usr/share/mathjax/MathJax.js}}。

サーバーのルートディレクトリが {{ic|/srv/http/}} の場合、シンボリックリンクを作成してスクリプトからインストールしたパッケージにアクセスできるようにしてください:

 $ cp -rs /usr/share/mathjax /srv/http/mathjax

ヘッダーに以下を記述することで {{ic|/srv/http/pages/equations.html}} で MathJax を使って TeX コードをパースできます:

 <script src="../mathjax/MathJax.js?config=TeX-AMS_SVG"></script>

== トラブルシューティング ==

=== MathJax と Plotly ===

{{ic|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 コードがロード中に表示されます。

エレメントの {{ic|css}} プロパティで {{ic|visibility: hidden}} を設定して、表示が完了した後に MathJax のイベントを使って設定を解除することで解決できます:

 MathJax.Hub.Queue( function () { 
     document.getElementById("myID").visibility = "visible";
 });