やりたいこと
- 入力した内容をリアルタイムでプレビュー欄へ表示したい
- TeX記法で入力した数式は数式としてリアルタイムで表示する
- 通常の文章は通常の文章としてリアルタイムで表示する
やったこと
- 記入欄と表示欄（プレビュー）を用意
- TeX記法の入力ができるようにMathJaxを導入
- リアルタイム（非同期）で表示欄（プレビュー）に出力されるようJavaScript実装
コピーアンドペースト
下記文章を下図の左の欄へコピーアンドペーストしてください。
右側のプレビュー欄にTeX記法で記載した部分は数式に通常の文章はそのまま文章として表示されます。
コピーアンドペースト用の文章
オイラーの公式は下記
$ e^{i\theta} = \cos\theta + i\sin\theta $
数式は数式に文章は文章としてプレビュー欄に表示されます。
上記を貼り付けた場合、下図のようになります。
実際の画面
コピーアンドペースト用の文章を左の欄へ貼り付けてみてください。
文章を左の欄へ各人で記入していただいても動作します。
See the Pen mathjax by ShimizuKosuke19910320 (@shimizukosuke19910320) on CodePen.
所感
TeX記法で記述した数式を非同期（プレビュー）で出力するための記事が少なく悪戦苦闘したため、この記事を書きました。mathjax-railsなども調べましたが、うまくいかず、、、この方法にたどり着きました。
今後、TeX記法についても記事を書きたいと思います。