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

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

MathJaxを利用することで, EdgeやCromeといったJavaScriptを利用できるブラウザでMathMLを表示することができます. また, MathMLを表示できるFirefoxであってもMathJaxを利用することで, mspace要素のlinebreak属性といった, そのままでは対応していない要素や属性を利用できます.

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

1 XHTMLの場合

1.1 Script要素の記入方法(XHTMLの場合)

XHTMLの場合, <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を利用するためのコード(XHTMLの場合)

これは, MathJaxヴァージョン2.7.7を利用するコードです. 21年8月現在の最新ヴァージョンは3ですが, 例えば, mspace要素のlinebreak属性といった機能にヴァージョン3がまだ対応してないので, ヴァージョン2を利用しています. 21年8月現在, cdnjs.comのサーバを利用することが推奨されています(MathJax Documentation : Getting Started with MathJax参照).

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

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

1.2 記入例と表示例(XHTMLの場合)

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

XHTMLの場合, 実体参照を利用するには, MathMLの書き方 1.1 実体参照の利用方法に示すように外部実体のファイルを読み込む必要がありますが、CromeやEdgeでは構文エラーになります. そのため, ここでは, MathML3仕様書でも推奨されている数値文字参照を使用しています.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml: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 xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mi>a</mi>
    <mo>&#x02062;</mo>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mi>b</mi>
    <mo>&#x02062;</mo>
    <mi>x</mi>
    <mo>+</mo>
    <mi>c</mi>
    <mo>=</mo>
    <mn>0</mn>
    <mspace linebreak="newline"/>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>&#x000B1;</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mn>4</mn>
            <mo>&#x02062;</mo>
            <mi>a</mi>
            <mo>&#x02062;</mo>
            <mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>&#x02062;</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </math>
</body>
</html>
リスト2 MathJaxを利用する場合の記入例(XHTMLの場合)