MathMLを使って数式をWebに表示して、さらに動的に追加されたDOMのスニペットも数式表示化

いま開発中のアプリでどうしても平方根やその他の数式を表示したいので、MathMLというJavascriptライブラリを使う。

↓まずはMathJaxのJavaScriptライブラリを読み込み

quiz.html.erb

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>

↓HTMLにべた書きすべき「ルート３」はMathJaxではこのように記述するので・・・

<math><msqrt><mi>3</mi></msqrt></math>

↓これをこんなふうにHTMLにべた書きすると・・・

quiz.html.erb

<div class='answer' id='answer-1'>
    <h3 class='n'></h3>
    <p><math><msqrt><mi>3</mi></msqrt></math></p>
</div>

ふむ、静的に初めからHTMLにべた書きしたスニペットは正しく数式にしてくれているようだった。

しかし、ここからJavaScriptを用いて次の問題や解答の選択肢を追加すると、べたの<math><msqrt><mi>3</mi></msqrt></math>が表示されてしまったり、ルート部分が消えてただの「３」になってしまう。
↓ルート３を表示したかったのに・・・

今回は問題に対する答えを４択ないし８択で選んで答えるというクイズゲームなので、後から動的に差し替える問題と答えのスニペットもちゃんときれいに数式化してもらわなくちゃ困る訳である。

これはおそらく後から動的に追加したDOMにはイベントハンドラがないというjQueryでよくひっかかる話と似ていて、あとからHTMLに追加されたMathMLスニペットに対してレンダリング処理をかけていないことが理由だろう。そうとしか考えられない。
そこでMathMLのDocumentを漁っているとやっぱり再レンダリングする関数がちゃんとあったので、再レンダリングしたいタイミングで

quiz.js

MathJax.texReset();
MathJax.typeset();

をかけてやると、問題なくすべてのDOMをレンダリングしてくれた。

↓やったー