SIGMA-SE Tech Blog

SIGMA-SE Tech Blog


当サイトは、過去に運営していた別ドメイン（unisia-se.com）から sigma-se.com へ移行した技術ブログです。
旧サイトの記事をもとに、内容の精査・加筆・最新化を行い再構成しています。
正確で実用的な情報提供を目的としています。

MathJax - MathML、LaTeX : 導入と数式表示サンプル

概要

MathJaxを使い、Webページ上でMathMLやLaTeX形式の数式を表示する方法を整理する。

技術記事では、数式を画像ではなくテキストとして扱えると、拡大表示、検索、修正がしやすくなる。

ここでは、MathJaxの読み込み、MathMLの基本要素、LaTeXによる数式表現をサンプルで確認する。

この記事で扱うこと

  • MathJaxをWebページへ読み込む基本。
  • MathMLで数式を構造的に表す考え方。
  • LaTeX記法で分数、添字、平方根などを表示する方法。
  • ブログ記事で数式を書くときの注意点。

作業前に確認すること

確認項目 内容
HTMLの基礎scriptタグやHTML要素の読み方を確認しておく。
数式表記分数、指数、添字などの基本的な数式表現を理解しておく。
表示確認ブラウザでHTMLを表示し、MathJaxが読み込まれているか確認できるようにする。

注意したい点

注意したい点 確認する観点
MathMLとLaTeXの違いMathMLはHTMLに近い構造、LaTeXは短い記法で数式を書く方法として捉える。
エスケープ漏れHTML内では記号の扱いに注意し、ブログの変換処理で壊れない形にする。
読み込み順序MathJaxのscriptが読み込まれないと、数式がそのまま文字として表示される。

MathJaxは、MathML、LaTeX、AsciiMathで記述された数式をウェブブラウザ上で表示するためのJavaScriptライブラリ。
また、ブラウザ依存せず、如何なる環境下でも動作を保証するクロスブラウザ仕様となる。

※ MathMLの対応ブラウザについては、2018年1月時点でFirefox、Safari、iOS Safariのみ。
より詳細な使用方法は、公式ドキュメントを参考。
MathML3ドキュメント：https://www.w3.org/TR/MathML3/

実施内容

MathJaxの導入

導入はJavaScriptの読み込みのみ。

  • MathJax.jsを読み込む
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    URLパラメータのconfigをTeX-MML-AM_CHTMLと指定することにより、MathML、LaTeX、AsciiMathすべて認識できる状態となる。
    LaTeXのみ認識するのであれば、TeX-AMS_CHTMLとするなど色々な設定方法があるため、詳細については下記ドキュメントを参考。
    ※ https://docs.mathjax.org/en/latest/config-files.html

MathMLの要素

基本的には<math>内に、mnタグやmoタグなどのMathML要素を記述する形になる。

  • MathMLの全要素
    ※ より詳細なルールや使用方法は下記を参考。
    https://developer.mozilla.org/ja/docs/Web/MathML/Element/math

    • <math>：トップレベル要素
    • <maction>：部分式にバインドされたアクション
    • <maligngroup>：揃えグループ
    • <malignmark>：揃えポイント
    • <menclose>：囲みコンテンツ
    • <merror>：囲み構文エラーメッセージ
    • <mfenced>：括弧
    • <mfrac>：分数
    • <mglyph>：非標準記号の表示
    • <mi>：識別子
    • <mlabeledtr>：表または行列のラベル付き行
    • <mlongdiv>：割り算の筆算表記
    • <mmultiscripts>：前置字とテンソル添字
    • <mn>：数字
    • <mo>：演算子
    • <mover>：真上付き
    • <mpadded>：コンテンツまわりの空白
    • <mphantom>：予約スペースを持つ不可視コンテンツ
    • <mroot>：累乗根
    • <mrow>：グループ化された部分式
    • <ms>：文字列リテラル
    • <mscarries>：carries などのアノテーション
    • <mscarry>：Single carry, の子要素
    • <msgroup>： および 要素のグループ化された行
    • <msline>： 要素内の水平線
    • <mspace>：空白
    • <msqrt>：平方根
    • <msrow>： 要素の行
    • <mstack>：スタック揃え
    • <mstyle>：書式変更
    • <msub>：下付き
    • <msup>：上付き
    • <msubsup>：下付き上付きの組
    • <mtable>：表または行列
    • <mtd>：表または行列のセル
    • <mtext>：テキスト
    • <mtr>：表または行列の列
    • <munder>：真下付き
    • <munderover>：真下付きと真上付きの組
    • <semantics>：セマンティックアノテーション用のコンテナ
    • <annotation>：Data アノテーション
    • <annotation-xml>：XML アノテーション

MathMLの表示サンプル

以下の表示サンプルで確認する。

  • 黄金比

    • 表示
      1 + 5 2

    • マークアップ 
      <math>
  <mfrac>
    <mrow>
      <mn>1</mn><mo>+</mo><msqrt><mn>5</mn></msqrt>
    </mrow>
    <mn>2</mn>
  </mfrac>
</math>

  • 極限値

    • 表示
      lim x → 0 sin ⁡ x x = 1

    • マークアップ 
      <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>

  • 逆行列

    • 表示
      A = a b c d A - 1 = 1 a d - b c d - b - c a

    • マークアップ 
      <math>
  <mtable>
    <mtr>
      <mtd>
        <mi>A</mi>
        <mo>=</mo>
        <mfenced>
          <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>
        </mfenced>
      </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>
        <mfenced>
          <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>
        </mfenced>
      </mtd>
    </mtr>
  </mtable>
</math>

LaTeXの表示サンプル

続いてLaTeX。
以下の表示サンプルで確認する。

  • 二次方程式の解

    • 表示
      \[ x = \frac{-b\pm\sqrt{b^{2}-4ac}}{2a} \]
    • マークアップ 
      \[
 x = \frac{-b\pm\sqrt{b^{2}-4ac}}{2a}
\]

  • 絶対値の定義

    • 表示
      \[ |x| = \begin{cases} x & \text{\(x\ge0\) のとき} \\ -x & \text{\(x<0\) のとき} \end{cases} \]
    • マークアップ 
      \[
 |x| = \begin{cases}
   x & \text{\(x\ge0\) のとき} \\
   -x & \text{\(x<0\) のとき}
 \end{cases}
\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}
\]

  • ガウス積分

    • 表示
      \[ 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}
\]

  • n × 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は構造的、LaTeXは短く書きやすい表現として使い分ける。
  • 数式をテキストとして管理すると、技術記事の保守性が上がる。
「プログラム開発技術」の最新 5件
・情報セキュリティ - 暗号技術：5/10 無線通信と暗号解読の仕組み
・情報セキュリティ - 暗号技術：4/10 暗号具と鍵管理の仕組み
・情報セキュリティ - 暗号技術：3/10 多表式暗号の仕組み
・情報セキュリティ - 暗号技術：2/10 頻度分析による解読の仕組み
・情報セキュリティ - 暗号技術：1/10 古典暗号の仕組み

プログラム開発技術 Webシステム開発 LaTeX MathJax MathML

2018年12月16日1:00

カテゴリー
タグ Angular Telegram OpenWeatherMap SCXML MeCab NumPy LaTeX MathML MathJax Matplotlib GitHub Git venv PostgresSQL Django Python Apache Nginx CentOS VPS Vim TensorFlow 古典暗号 暗号技術 学習 基礎理論 機械学習 深層学習 ニューラルネットワーク SSL/TLS Let's Encrypt scikit-learn
Copyright SIGMA-SE All Rights Reserved.
s-hama@sigma-se.jp