概要
MathJaxを使い、Webページ上でMathMLやLaTeX形式の数式を表示する方法を整理する。
技術記事では、数式を画像ではなくテキストとして扱えると、拡大表示、検索、修正がしやすくなる。
ここでは、MathJaxの読み込み、MathMLの基本要素、LaTeXによる数式表現をサンプルで確認する。
この記事の構成
- MathJaxの導入
MathJaxの導入の手順と確認ポイントを整理。 - MathMLの要素
MathMLを構成する主な要素と、数式を構造化して記述する方法を整理。 - MathMLの表示サンプル
MathMLの表示サンプルをコードや具体例で確認。 - LaTeXの表示サンプル
LaTeXの表示サンプルをコードや具体例で確認。
実施内容
MathJaxの導入
MathJaxはCDNからJavaScriptを読み込むだけで導入できる。
- 現行のMathJax 4.xを読み込む
TeXとMathMLを入力として受け取り、CommonHTMLで表示する公式ドキュメントの構成例は次のとおり。<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>mathjax@4は最新の4.x系を取得する指定である。
再現性を重視する環境ではmathjax@4.0.0のように完全なバージョンを固定。TeXだけを処理する場合はtex-chtml.jsなど、用途に合う小さなコンポーネントも選べる。
MathMLの要素
MathMLでは、トップレベルの<math>内に<mn>や<mo>などの要素を組み合わせ、数式の構造を記述する。
-
このページで使う主なMathML要素
<math>：トップレベル要素。<mrow>：複数の要素を一つの部分式としてまとめる。<mi>：変数名や関数名などの識別子。<mn>：数値。<mo>：演算子や括弧。<mfrac>：分数。<msqrt>：平方根。<msup>：上付き文字。<munder>：式の真下に付ける要素。<mtable>、<mtr>、<mtd>：表や行列、その行、セル。
※ MathML仕様には<mfenced>もあるが、ブラウザ実装を重視したMathML Coreには含まれない。
互換性を考え、このページでは<mrow>と括弧を表す<mo>を明示的に使用する。
MathMLの表示サンプル
以下の表示サンプルで確認する。
-
黄金比
- 表示
- マークアップ
<math> <mfrac> <mrow> <mn>1</mn><mo>+</mo><msqrt><mn>5</mn></msqrt> </mrow> <mn>2</mn> </mfrac> </math>
- 表示
-
極限値
- 表示
- マークアップ
<math> <munder> <mi>lim</mi> <mrow> <mi>x</mi> <mo>→</mo> <mn>0</mn> </mrow> </munder> <mfrac> <mrow> <mi>sin</mi> <mo></mo> <mi>x</mi> </mrow> <mi>x</mi> </mfrac> <mo>=</mo> <mn>1</mn> </math>
- 表示
-
逆行列
\(2 \times 2\)行列の逆行列を表示。ただし、逆行列が存在する条件は\(ad-bc \neq 0\)である。
- 表示
- マークアップ
<math> <mtable> <mtr> <mtd> <mi>A</mi> <mo>=</mo> <mrow> <mo>(</mo> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> <mo>)</mo> </mrow> </mtd> </mtr> <mtr> <mtd> <msup> <mi>A</mi> <mrow> <mo>-</mo> <mn>1</mn> </mrow> </msup> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mi>a</mi> <mo></mo> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mo></mo> <mi>c</mi> </mrow> </mfrac> <mo></mo> <mrow> <mo>(</mo> <mtable> <mtr> <mtd> <mi>d</mi> </mtd> <mtd> <mo>-</mo> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mo>-</mo> <mi>c</mi> </mtd> <mtd> <mi>a</mi> </mtd> </mtr> </mtable> <mo>)</mo> </mrow> </mtd> </mtr> </mtable> </math>
- 表示
LaTeXの表示サンプル
MathJaxのTeX入力では、分数や行列をMathMLより短い記述で表せる。
ここでは、数式を\[と\]で囲んだ別行表示の例を確認する。
-
二次方程式の解
- 表示\[ x = \frac{-b\pm\sqrt{b^{2}-4ac}}{2a} \]
- マークアップ
\[ x = \frac{-b\pm\sqrt{b^{2}-4ac}}{2a} \]
- 表示
-
絶対値の定義
- 表示\[ |x| = \begin{cases} x & (x\ge0\text{ のとき}) \\ -x & (x<0\text{ のとき}) \end{cases} \]
- マークアップ
\[ |x| = \begin{cases} x & (x\ge0\text{ のとき}) \\ -x & (x<0\text{ のとき}) \end{cases} \]
- 表示
-
\(f(x)\)の導関数
- 表示\[ f'(x) = \lim_{\Delta x \to 0} \frac{f(x+\Delta x) - f(x)}{\Delta x} \]
- マークアップ
\[ f'(x) = \lim_{\Delta x \to 0} \frac{f(x+\Delta x) - f(x)}{\Delta x} \]
- 表示
-
ガウス積分
- 表示\[ \int_{-\infty}^{\infty} e^{-x^{2}} \, dx = \sqrt{\pi} \]
- マークアップ
\[ \int_{-\infty}^{\infty} e^{-x^{2}} \, dx = \sqrt{\pi} \]
- 表示
-
\(n \times n\)行列
- 表示\[ A = \begin{pmatrix} a_{11} & a_{12} & \ldots & a_{1n} \\ a_{21} & a_{22} & \ldots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{n1} & a_{n2} & \ldots & a_{nn} \end{pmatrix} \]
- マークアップ
\[ A = \begin{pmatrix} a_{11} & a_{12} & \ldots & a_{1n} \\ a_{21} & a_{22} & \ldots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{n1} & a_{n2} & \ldots & a_{nn} \end{pmatrix} \]
- 表示
まとめ
- MathJaxを使うと、Webページ上でMathMLやLaTeXの数式を表示できる。
- MathMLはHTMLに近い構造で数式を表し、LaTeXは短い記法で数式を書けるため、用途に応じて使い分ける。
- MathJaxのscriptが正しく読み込まれない場合、数式は変換されず文字列のまま表示される。
- HTMLの記号やブログの変換処理によるエスケープ漏れに注意し、数式を壊れないテキストとして管理すると記事を保守しやすい。