ReactでMathJaxで数式を書く

結論

ツールを使わず MathJax の機能だけで成功!!!!

chatGPT3.5 に助けてもらいました。

書き換えでなく創作になるとさすが chatGPT は嘘ばっかりつくけど、React がわかりやすいエラーを吐いてくれるのでそれをつぶして行けばオッケー。

See the Pen mathjax by kalz2q (@kalz2q) on CodePen.

感想

React MathJax
で検索するとたくさんツールがヒットするので、何かしらのツールのインストールが必要なのかと思ってたけど違うのですね。

React は簡単に Component が作れて npm に登録できてしまうのでこんなことになる。

まじめに MathJax のドキュメントを読む努力が必要ですね。 読まなかったけどw

読まなかったわけではなくて、少し読んだら次のようなことがわかった。

  1. バージョン2までの仕組みは捨てられてバージョン3で新しくなった。 メンテされていないツールは使えない。 過去のツールは工夫しても使えない。

  2. LaTeX記法と React の JSX は記法が重なるのでエスケープが困難。

  3. 入力を解析する部分と数式に変換する部分を組み合わせる必要がある。

追記

Component から呼び出された Component では MathJax が使えないので Component ごとに MathJax の設定を入れる必要があるみたい。

設定を import すればいいだけだけど、CodePen のような環境に移すときは注意が必要。