MathML

MathMLとはMathematical Markup Languageの略称で、数式を記述するためのマークアップ言語です。この記事では、MathMLを使ってHTMLで数式を表示させる方法をご紹介します。

math

HTMLの中でMathMLを使うには、次のようにする。

<!DOCTYPE html>
<html>
  <head>
    <title>MathML in HTML</title>
  </head>
  <body>
    <math>
      <!-- MathML content -->
    </math>
  </body>
</html>

XHTMLの中でMathMLを使うには、次のようにする。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MathML in XHTML</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <!-- MathML content -->
    </math>
  </body>
</html>

数字

1や2などの数字をMathMLで表現するには、<mn>タグ(math number)を使う。

<math>
  <mn>256</mn>
</math>

256

変数、関数

変数や関数などの識別子をMathMLで表現するには、<mi>タグ(math identifier)を使う。

<math>
  <mi>x</mi>
</math>

x

演算子

+や-などの演算子をMathMLで表現するには、<mo>タグ(math operator)を使う。

<math>
  <mi>x</mi>
  <mo>+</mo>
  <mn>1</mn>
</math>

x + 1

括弧

括弧をMathMLで表現するには、<mfenced>タグを使う。

<math>
  <mi>f</mi>
  <mfenced>
    <mi>x</mi>
    <mi>y</mi>
  </mfenced>
</math>

f (x, y)

分数

分数をMathMLで表現するには、<mfrac>タグ（math fraction)を使う。<mfrac>タグの中には分子と分母を入れる。

<math>
  <mfrac>
    <mn>1</mn>
    <mi>x</mi>
  </mfrac>
</math>

\frac{1}{x}

累乗

累乗をMathMLで表現するには、<msup>タグを使う。

<math>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

x^{2}

平方根

平方根をMathMLで表現するには、<msqrt>タグ(math square root)を使う。

<math>
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>

\sqrt{x}

累乗根

累乗根をMathMLで表現するには、<mroot>タグ(math root)を使う。

<math>
  <mroot>
    <mn>3</mn>
    <mi>x</mi>
  </mroot>
</math>

\sqrt[x]{3}

行列

行列をMathMLで表現するには、<mtable>タグを使う。

<math>
  <mo>(</mo>
  <mtable>
    <mtr>
      <mtd>
        <mn>1</mn>
      </mtd>
      <mtd>
        <mn>2</mn>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <mn>3</mn>
      </mtd>
      <mtd>
        <mn>4</mn>
      </mtd>
    </mtr>
  </mtable>
  <mo>)</mo>
</math>

(\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix})

積分

積分をMathMLで表現するには、<msubsup>タグを使う。

<math>
  <msubsup>
    <mo>∫</mo>
    <mi>a</mi>
    <mi>b</mi>
  </msubsup>
  <mi>f</mi>
  <mfenced>
    <mi>x</mi>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

\int_{a}^{b} f (x) d x

MathJax

MathMLは現在のところFireFoxとSafariしかサポートしていない。ほかのWebブラウザでMathMLの数式を表示させるためには、JavaScriptライブラリのMathJaxを使う。

MathJaxを使うためには、次のスクリプトをHTML文書に追加する。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

上記の方法なら常に最新マイナーバージョンの MathJax を利用できる。

特定のマイナーバージョンを指定して MathJax を利用するときは、以下のようにする。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>

このページも Chrome や Edge の為に MathJax を使用している。

特殊相対性理論

特殊相対性理論として有名な「質量とエネルギーの等価性」の数式は、次のように表わす。

<math>
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

E = m c^{2}

ベイズの定理

ベイズ統計学におけるベイズの定理は、次のように表わす。

<math>
  <mi>P</mi>
  <mo>(</mo>
  <mi>A</mi>
  <mo>|</mo>
  <mi>B</mi>
  <mo>)</mo>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mi>P</mi>
      <mo>(</mo>
      <mi>B</mi>
      <mo>|</mo>
      <mi>A</mi>
      <mo>)</mo>
      <mi>P</mi>
      <mo>(</mo>
      <mi>A</mi>
      <mo>)</mo>
    </mrow>
    <mrow>
      <mi>P</mi>
      <mo>(</mo>
      <mi>B</mi>
      <mo>)</mo>
    </mrow>
  </mfrac>
</math>

P (A | B) = \frac{P (B | A) P (A)}{P (B)}

オイラーの等式

ネイピア数 e、虚数単位 i、円周率 π の間に成り立つ等式で、「世界で一番美しい数式」と呼ばれるオイラーの等式は、次のように表わす。

<math>
  <msup>
    <mi>e</mi>
    <mrow>
      <mi>i</mi>
      <mi>π</mi>
    </mrow>
  </msup>
  <mo>+</mo>
  <mn>1</mn>
  <mo>=</mo>
  <mn>0</mn>
</math>

e^{i π} + 1 = 0