HTMLに数式を埋め込む方法

2024-02-17 14:08 HTML 数式 数学
  1. MathMLを使用する方法: MathMLは数学的な表現を記述するためのXMLベースの言語です。以下はMathMLを使用して数式を埋め込む例です。
<!DOCTYPE html>
<html>
<head>
  <title>MathML Example</title>
</head>
<body>
  <p>以下は二次方程式の解の公式です:</p>
  <math>
    <mrow>
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mo>-</mo>
          <mi>b</mi>
          <mo>&plusmn;</mo>
          <msqrt>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mn>4</mn>
            <mo>&times;</mo>
            <mi>a</mi>
            <mo>&times;</mo>
            <mi>c</mi>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mo>&times;</mo>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </mrow>
  </math>
</body>
</html>
  1. LaTeXを使用する方法: LaTeXは数学的な文書を作成するための強力な言語です。数式を埋め込むためには、MathJaxなどのJavaScriptライブラリを使用することが一般的です。以下はMathJaxを使用してLaTeX数式を埋め込む例です。
<!DOCTYPE html>
<html>
<head>
  <title>MathJax Example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</head>
<body>
  <p>以下は二次方程式の解の公式です:</p>
  <div id="equation"></div>

  <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      const equation = document.getElementById('equation');
      equation.innerHTML = `\\(x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\)`;
      MathJax.typesetPromise();
    });
  </script>
</body>
</html>
  1. ライブラリを使用する方法: MathJax以外にも、KaTeXやMathQuillなどの数式処理用ライブラリがあります。これらのライブラリを使うと、数式を簡単にHTMLに埋め込むことができます。具体的なコード例は各ライブラリのドキュメントを参照してください。

以上の方法を使用して、HTMLに数式を埋め込むことができます。