MathJax/MathMLを使った数式表示

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

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

a + b = c

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

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

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

x={-b \pm \sqrt{b^2 - 4ac} \over 2a}

しかし、画像を使うと拡大・縮小が不便になるなど様々な問題が発生してきます。そこで、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を使った数式表示
MathJaxを使った数式表示

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

\( e^x \) をマクローリン展開すると
\[ e^x = \sum^{\infty}_{n=0}\frac{1}{n!}x^n \]
MathJaxを使った数式表示
MathJaxを使った数式表示

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

デモページ

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


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

“MathJax/MathMLを使った数式表示” への8件の返信

  1. 「MathJaxを使った数式表示」のソースをコピーしたhtmlを
    サーバーに置いても綺麗に表示されません。
    「MathJaxを使った数式表示」では綺麗な数式が表示されます。
    (環境はIE 10です)
    MathJaxが動作していないんでしょうけど、下記ではダメなんでしょうか?
    ・・・・・・・・・・・・・・・

    MathJaxを使った数式表示 – テストコード置き場

    ・・・・・・・・
    下記のスタイルシートが必要なのでしょうか?

    教えていただければ助かります。よろしくお願いします。

  2. 佐藤さん、こんにちは。

    URL: http://code.rlated.net/mathjax/mathjax.html
    の数式は表示されるけれど、
    このHTMLソースを佐藤さんのサーバーに持っていくと
    数式が表示されないということでしょうか?

    それでしたら、ヘッダー部分の
    <script src=”mathjax-MathJax-24a378e/MathJax.js?config=TeX-AMS-MML_HTMLorMML”></script>

    <script src=”http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML”></script>
    に書き換えて試してみてください。

    もうひとつの方法として、MathJaxのコードをお使いのサーバーにアップロードする(デモページではこの方法を使っています)という方法もありますが、cdn.mathjax.orgを使う方がお手軽かと思います。

  3. すみません

    に書き換えても同じ結果
    e x = ∑ n = 0 ∞ 1 n ! x n
    です。この行を書いても書かなくても同じ結果になります。
    他に考えられる問題ありませんか?

  4. ここのコメントシステムの関係でタグ(<>)が削除されてしまうため、一部は推測で書いています。間違って解釈していたら、申し訳ありません。

    他にパッと思いつく可能性としては、

    – 半角で書く部分を全角の英数字、記号にしている
    – ブラウザの設定でJavaScriptが実行できていない

    などを考えてみましたが、正直なところお手上げ状態です。

    とりあえず、MathJaxを使う最小のサンプルを作ってみましたので、こちらを参考にもう一度見直してみていただければ思います。(ヘッダー部分も直しているので)佐藤さんのサーバーにそのままコピーして持っていっても動くはずです。

    http://code.rlated.net/mathjax/simple.html

    それから、もし可能でしたらテストしているファイルをどこかにアップロードして、こちらに教えていだだけたらアドバイスできるかと思います。(内容は非公開にしますので)

  5. いろいろありがとうございます。

    数式はTeX記述のようですが、サーバーにアップロードしましたら表示されました。
    と言うことは
    -半角で書く部分を全角の英数字、記号にしている
    と言うことになるでしょうか?

  6. 解決したということでいいんですかね?
    それなら良かったです。

    > と言うことは
    > -半角で書く部分を全角の英数字、記号にしている
    > と言うことになるでしょうか?

    これが原因かどうかははっきりとは分かりませんが、
    どこかで間違った記述があったということだと思います。

    もしまた何かあればコメントでもしてください。
    それでは。

  7. 余計な記述がありました。その記述を取れば解決しました。
    どうもありがとうございました。

佐藤 博 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です