2013年3月26日2019年6月1日投稿者: rlated

MathJax/MathMLを使った数式表示

技術的なホームページを作っていると数式を書くこともあるかと思います。

単純な四則演算程度であれば、

a + b = c

と書いても不自由ありませんが、根号を使ったり分数が入った式などになると途端に読み辛くなってしまいます。

x = (-b±√(b^2-ac))/2a

そこで、どうやって数式を表示するかとなりますが、よく使われる方法が画像を使った表示です。^注1

しかし、画像を使うと拡大・縮小が不便になるなど様々な問題が発生してきます。そこで、MathMLを使った数式表示を紹介してみたいと思います。

MathMLを使った数式表示

MathMLというのはマークアップ言語の1つでXMLを使って数式を記述します。このXMLはもちろんHTMLに埋め込んでブラウザで表示することもできます。

<math>
  <msup>
    <mi>e</mi>
    <mi>x</mi>
  </msup>
  <mo>=</mo>
  <munderover>
    <mo>∑</mo>
    <mrow>
      <mi>n</mi>
      <mo>=</mo>
      <mn>0</mn>
    </mrow>
    <mrow>
      <mi>∞</mi>
    </mrow>
  </munderover>
  <mfrac>
    <mn>1</mn>
    <mrow>
      <mi>n</mi>
      <mo>!</mo>
    </mrow>
  </mfrac>
  <msup>
    <mi>x</mi>
    <mi>n</mi>
  </msup>
</math>

MathMLには1つ問題があり、MathMLの表示に未対応のブラウザでは数式が正しく表示できません。

Internet Explorerでの表示例 (MathML未対応)

$MathMLを使った数式表示$

MathMLを使った数式表示

Firefoxでの表示例 (MathML対応)

$MathMLを使った数式表示$

MathMLを使った数式表示

現在お使いのブラウザがMathMLの表示に対応しているかは下記のデモページで確認してみてください。
MathMLを使った数式表示

MathJaxを使った数式表示

MathMLを使うのが一番おすすめですが、現状ではMathML未対応のブラウザがあるということは先程書いた通りです。それを解決する方法の1つにMathJaxというスクリプトがあります。

MathJaxは、MathMLで書いた数式をMathML未対応のブラウザでも表示できるようにしたりTeX形式で書いた数式を表示したりできます。

MathJaxの使い方

MathJaxを使う一番簡単な方法はCDNを利用する方法です。

HTMLのヘッダーから

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

とスクリプトを読み込みます。

後は、

MathMLで書いた記述は自動的に数式に変換
$$ $$、、\[ \]が囲んだ部分を数式に変換

とされます。

上で紹介したMathMLをMathJaxで表示すると次のようになります。

MathJaxを使った数式表示

TeX形式で書いた場合の表示は次の通りです。

\( e^x \) をマクローリン展開すると
\[ e^x = \sum^{\infty}_{n=0}\frac{1}{n!}x^n \]

特に難しい準備も不要で手軽に綺麗な数式を表示できますので、ホームページで利用してみてはいかがでしょうか？

デモページ

この記事で紹介した画像装飾のデモページは下記でご覧になれます。
MathMLを使った数式表示
 MathJaxを使った数式表示

^注1 画像はGoogle Chartを使って生成しています。