ブログ

【MathJax】webブラウザで数式を表示する方法の紹介

  /
MathJax

本サイトでは、分析関連の記事などでの数式の表示のために、MathJaxというライブラリを利用しております。

MathJax公式サイト

本記事では、そのMathJaxについて簡単に紹介します。

MathJaxを使うには？

MathJaxは、以下のURLのJavaScriptのライブラリを呼び出して使用します。

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js

よって何かしらダウンロードしてきて、サーバーにインストールをする必要はありません。

因みに、wordpressのプラグインにMathJax-Latexがありますが、使用しているMathJaxのバージョンが古い事や、設定の自由度が少ないことからお勧めしません。

設定

使用する準備としては、HTMLヘッダーに上記JavaScriptを呼び出す処理を記載するだけです。

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS_CHTML">
</script>

※wordpressならば「HTMLタグ設定」のメニューからhead内に記入します。

上記はデフォルトで使用するための呼び出し方ですが、細々とした設定をカスタマイズすることが可能で、本サイトの場合は「左寄せにする」「自動で番号をふる」等の設定のため以下のように記載しております。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left",
  displayIndent: "2em",
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  },
  TeX: {
      equationNumbers: { autoNumber: "all" },
      extensions: ["mhchem.js"]
  },
  "CommonHTML": {
    matchFontHeight: false,
    mtextFontInherit: true
  }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS_CHTML">
</script>

※詳しいオプションの設定は、公式サイトをご参照ください。

数式の記述

数式の記述には、論文執筆などに使われて世界共通といって良い「Latex」の構文を使います。

独立した行として表示させる場合は、Latex形式で記載した数式を以下のように”$$”で囲みます。

$$h_\theta(x)=\theta_0+\theta_1x$$

 

ブラウザ上では以下のように表示されます。

$$h_\theta(x)=\theta_0+\theta_1x$$

文中で使用する場合は、”\(“と”)\”で囲みます。（本サイトでは設定で”$”でも代用できるようにしております。）

この\(h_\theta(x)\)が販売価格を予測するためのモデルです。

 

ブラウザ上では以下のように表示されます。

この\(h_\theta(x)\)が販売価格を予測するためのモデルです。

その他設定

本サイトではスマフォでの表示対策として、CSSに以下を追加しております。

.MathJax {
font-size: 1.3em;
}
span.MJXc-display{
overflow-x: auto;
}

 

”font-size: 1.3em;”の設定は、何故かスマフォで表示した場合に数式が大きくなってしまっていたので、その対策として追加しております。

“overflow-x: auto;”の設定は、長い数式がスマフォでは入りきらずに数式が切れてしまうため、数式を囲んでいるspanクラスに対してはみ出した場合に横スクロールできるようにしています。

まとめ

以上、MathJaxの簡単な紹介でした。

簡単に導入できて、簡単に使用できる事がわかっていただけたかと思います。

さらに、MathJaxの良いところとして、ブラウザ上に表示されている数式を右クリックして「Show Math As」→「Tex Command」を選択すると、元の数式がTex形式で表示される事です。

courseraの機械学習の講義ノートでも採用されているため、受講記を書く時に、使った数式（のLatex形式）をそのままコピーする事ができて楽です。

なお、難点をあげるとすると、クライアントサイドの処理のため、描画が遅い場合があります。（特にスマフォは遅いです・・）

ただ、それでも現在の選択肢としてはMathJaxがベストだと思います。

 

こんな記事もおすすめ