React で Katex を使用して数式を表示する方法

npm install react-katex @types/react-katex

import { useState } from "react";
import "katex/dist/katex.min.css";
import { InlineMath, BlockMath } from "react-katex";
import "./App.css";

function App() {
  const defaultInlineFomula = "d = \\sqrt{a^2 + b^2}";
  const [inlineFomula, setInlineFomula] = useState(defaultInlineFomula);
  const defaultblockFomula = `\\begin{pmatrix}
   a & b \\\\
   c & d
\\end{pmatrix}`;
  const [blockFomula, setBlockFomula] = useState(defaultblockFomula);

  return (
    <>
      <div className="container">
        {/* インライン数式 */}
        <span>インライン数式 入力欄</span>
        <input
          type="text"
          value={inlineFomula}
          onChange={(event) => setInlineFomula(event.target.value as string)}
          className="inline-math-input"
        ></input>

        <span>インライン数式 表示欄</span>
        <div className="inline-math-display">
          <span>
            インライン数式のレンダリング結果は
            <InlineMath math={inlineFomula} />
            です。
          </span>
        </div>

        {/* ブロック数式 */}
        <span>ブロック数式 入力欄</span>
        <textarea
          value={blockFomula}
          onChange={(event) => setBlockFomula(event.target.value as string)}
          className="block-math-input"
          rows={15}
        ></textarea>

        <span>ブロック数式 表示欄</span>
        <div className="block-math-display">
          <span>
            ブロック数式のレンダリング結果は
            <BlockMath math={blockFomula} />
            です。
          </span>
        </div>
      </div>
    </>
  );
}

export default App;