MathMLとはMathematical Markup Languageの略称で、数式を記述するためのマークアップ言語です。この記事では、MathMLを使ってHTMLで数式を表示させる方法をご紹介します。
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>
変数や関数などの識別子をMathMLで表現するには、<mi>タグ(math identifier)を使う。
<math>
<mi>x</mi>
</math>
+や-などの演算子をMathMLで表現するには、<mo>タグ(math operator)を使う。
<math>
<mi>x</mi>
<mo>+</mo>
<mn>1</mn>
</math>
括弧をMathMLで表現するには、<mfenced>タグを使う。
<math>
<mi>f</mi>
<mfenced>
<mi>x</mi>
<mi>y</mi>
</mfenced>
</math>
分数をMathMLで表現するには、<mfrac>タグ(math fraction)を使う。<mfrac>タグの中には分子と分母を入れる。
<math>
<mfrac>
<mn>1</mn>
<mi>x</mi>
</mfrac>
</math>
累乗をMathMLで表現するには、<msup>タグを使う。
<math>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
平方根をMathMLで表現するには、<msqrt>タグ(math square root)を使う。
<math>
<msqrt>
<mi>x</mi>
</msqrt>
</math>
累乗根をMathMLで表現するには、<mroot>タグ(math root)を使う。
<math>
<mroot>
<mn>3</mn>
<mi>x</mi>
</mroot>
</math>
行列を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>
積分を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>
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>
ベイズ統計学におけるベイズの定理は、次のように表わす。
<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>
ネイピア数 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>