MathMLトップへ
MathML利用環境を整えるへ

MathJaxを利用してMathMLを表示する

MathJaxを利用することで, EdgeやChromeといったJavaScriptを利用できるブラウザでMathMLを表示することができます. また, MathMLを表示できるFirefoxであってもMathJaxを利用することで, mo要素やmspace要素のlinebreak属性といった, そのままでは対応していない要素や属性を利用できます. なお, これらの属性は, MathML3では有効でしたが, MathMLコアの対象にはならず, また, MathML4でmspace要素のlinebreak属性は非推奨になる見込みです.

ここでは, HTML構文の場合とXML構文の場合に分けて, MathJaxの利用方法を説明します.

1 HTML構文の場合

1.1 Script要素の記入方法(HTML構文の場合)

HTML構文の場合, <head>要素の中に, 次の<script>要素を記入します.

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=MML_CHTML">
</script>
リスト1 MathJaxを利用するためのコード(HTML構文の場合)

これは, MathJaxバージョン2.7.7を利用するコードです. 24年11月時点の最新バージョンは3ですが, 例えば, mo要素やmspace要素のlinebreak属性といった機能がバージョン3では有効ではないので, バージョン2を利用しています. 24年11月時点, cdnjs.comのサーバを利用することが推奨されています(MathJax Documentation : Getting Started with MathJax参照).

config=以降のMML-CHTMLは, MathMLで入力された内容を受け取って, CommonHTML(MathJaxの第一の出力方法で高品質な描画が可能)で出力することを意味します. この設定については, TexやAsciiMathMLを受け取ったり, SVGで出力したりする設定もあります. 詳しくは, MathJax Documentation : Combined Configurationsを参照して下さい.

type="text/javascript"は省略可能ですが, MathJax Documentationの例にならって記入しています. また, asyncは, JavaScriptの読み込みとHTMLの描画を非同期で行うことにする属性で, 処理を高速化するための属性です. HTML構文では値を省略できます.

1.2 記入例と表示例(HTML構文の場合)

HTML構文の場合の, MathJaxを利用してMathMLを表示する場合の記入例とその表示例を示します.

HTML構文の場合, 名前付き文字参照(実体参照)が利用できます.

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>2次方程式の解の公式</title>
  <script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=MML_CHTML">
  </script>
</head>
<body>
  <math display="block">
    <mi>a</mi>
    <mo>&InvisibleTimes;</mo>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mi>b</mi>
    <mo>&InvisibleTimes;</mo>
    <mi>x</mi>
    <mo>+</mo>
    <mi>c</mi>
    <mo>=</mo>
    <mn>0</mn>
    <mo linebreak="newline"/>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>&PlusMinus;</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mn>4</mn>
            <mo>&InvisibleTimes;</mo>
            <mi>a</mi>
            <mo>&InvisibleTimes;</mo>
            <mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>&InvisibleTimes;</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </math>
</body>
</html>
リスト2 MathJaxを利用する場合の記入例(HTML構文の場合)