MathJax向けに書かれた数式を含むサーバーサイドでレンダリングされたHTMLを取ってきて、ReactのSPAに埋め込む場合、
componentDidMountでロード
async componentDidMount() {
// この設定は、\colorを使うために必要
;(window as any).MathJax = {
loader: {load: ['[tex]/color']},
tex: {packages: {'[+]': ['color']}}
}
// MathJaxをロード
const x = document.createElement('script')
x.type = "text/javascript"
x.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
x.async = true
ReactDOM.findDOMNode(this).appendChild(x)
}
componentDidUpdateでTypeset
componentDidUpdate() {
const es = document.getElementsByClassName("math-expr")
if (es) {
;(window as any).MathJax.typeset(es)
}
}
\color
が使えない!
version 3から、autoloadの設定にするか、明示的にロードしないと使えなくなったようです。
http://docs.mathjax.org/en/latest/input/tex/extensions/color.html
また、書式も変わっています。