logo
Published on

MathMLの使い方・数式や分数をHTMLに埋め込みしてブラウザで表示する方法

Authors

MathJaxを使用してHTMLページにMathML形式の数式を埋め込む方法を説明します。 MathMLは数学的な表現を記述するためのXMLベースの言語で、MathJaxを介してブラウザでレンダリングできます。

MathJaxの設定

まず、HTMLの<head>セクションにMathJaxのスクリプトを追加します。以下は、MathJaxを設定するためのコード例です：

<head>
  <meta charset="utf-8">
  <script>window.MathJax = { MathML: { extensions: ["mml3.js", "content-mathml.js"]}};</script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>

このコードは、MathJaxを読み込み、MathML形式の数式をブラウザでレンダリングできるように設定します。

MathML数式の埋め込み

次に、埋め込むMathML数式をHTMLコンテンツに追加できます。以下は簡単なMathML数式の例です：

<math display="block">
  <apply>
    <int/>
    <bvar>
      <ci>x</ci>
    </bvar>
    <apply>
      <root/>
      <apply>
        <power/>
        <ci>x</ci>
        <cn>-1</cn>
      </apply>
    </apply>
  </apply>
</math>

上記の例では、<math>要素内にMathML形式の数式を記述しています。MathJaxが有効になっている場合、このMathML数式は自動的にブラウザでレンダリングされ、数学的な表現が表示されます。

結果の表示

エディタでこのHTMLコードを保存し、Google Chromeなどのウェブブラウザで開いてみてください。MathJaxによってMathML数式がいい感じにレンダリングされ、読みやすい形式で表示されます。

この方法を使用することで、MathML形式の数式をHTMLページに簡単に埋め込むことができます。数学的なコンテンツを含む文書を作成する際に、読者に分かりやすい形式で数式を表記できます。

MathJaxの公式ウェブサイト: https://www.mathjax.org/