LaTeXコマンドを使えるMathJaxのインストール方法

MathJaxとは

『MathJax』は『LaTexコマンド』で記述された数式をウェブブラウザ上で人が見やすい形式に変換して表示してくれるJavaScriptのライブラリです。

アメリカ数学会が提供する論文等の世界最大のデーターベース『MathSciNet』等でも利用されており数式を表示するためのライブラリとしては世界標準的なポジションになっています。

プロジェクト自体も同じくアメリカ数学会が主体となり開発・管理を行っており多数のスポンサーもついているため今後も安心して利用を継続することができるでしょう。

LaTeXコマンドを使えるMathJaxのインストール方法

MathJaxを自分のサイトで使えるようにするために設置するインストール作業はとても簡単です。Content Delivery Network (CDN)経由でMathJaxのjsファイルを読み込むことでインストールできます。

サイトへの設置には下記1行を任意の場所に記述してください。特に指定がなければ〜タグ内に設置すれば良いでしょう。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML&locale=ja"></script>

サイトの動作速度などに配慮して読み込みの位置を下げたい場合はタグ直前あたりに『async defer』をつけて記述します。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML&locale=ja" async defer></script>

提供されるライブラリのバージョンは随時新しいものに更新されています。最新のライブラリをサイトに設置したい場合は公式ページからコードを取得してください。

• MathJax公式ヘルプ（英語）：Getting Started — MathJax 2.7 documentation

MathJax Version 3 のインストール方法

「MathJax Version 3」が公開されていますのでVersion 2.7からVersion 3に切り替えました。インストール方法は非常に簡単でスクリプトの読み込みだけを上記の2.7から以下の3に切り替えるだけで新しいバージョンを利用できます。既存の数式コードは変更する必要がありません。

とても簡単ですね。表示速度も速くなりますので早めに切り替えておきましょう。

<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async defer></script>

• 参考：mathjax/MathJax-demos-web: A repository with examples using mathjax-v3
• 参考：MathJax Documentation — MathJax 3.0 documentation

CDNのドメインが変更になっておりますので、dns-prefetch等を設定している方はあわせて変更が必要となります。

MathJaxインストール後の動作確認

MathJaxがサイトに正しく設置できているかの動作確認を行うため実際にLaTeXコマンドを入力して表示させてみましょう。下記1行を入力後保存してフロント側で表示確認を行ってください。出力結果のように表示されていれば正しく動作しています。

記述方法

数式：\(y=f(x)\)

出力結果

数式：\(y=f(x)\)

今日のdot

MathJaxのサイトへの設置・インストール方法に関する解説はこれで完了です。実際の利用方法については下記のページで詳しく解説していますのでご参照ください。

MathJaxで利用するLaTeXコマンド一覧と使い方

MathJaxで利用するLaTeXコマンド一覧表と使い方を解説。世界最大の数学論文データベース『MathSciNet』でも採用されている『MathJax』を使ってLaTeXコマンドを入力することで世界的な標準の流れに乗りながら日本語のテキスト入力にも対応できます。

この記事を読む ≫