MathJax
LaTeXコマンドの形式で記述した数式をブラウザ上で綺麗に表示してくれる MathJax という JavaScript ライブラリがある。
TeX Wiki などでも有名な奥村先生のホームページの記事（MathJaxによる数式表示）が参考になるが、<head> </head>の中に
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
を書いておくと、本文中の\( ... \)で囲まれた部分が数式になる。
これを通常のTeX文書のように$ ... $にするには、
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
とすればよい。奥村先生のホームページでは、これにさらに文字の高さの調整を外し（日本語環境だとうまくいかないことがあるらしい）、
<script>
MathJax = {
chtml: {
matchFontHeight: false
},
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
とされているらしい。
このブログでは、全てのページに数式があるわけではないので、必要なときだけ上記コードを<head>内に記述するようにしたい。とりあえず、「数学」タグのある記事の本文だけは読み込むようにしてみた。
テスト
なので、このページでは MathJax を読み込んでおり、$ ... $で囲むことで、$e^{i\pi} = -1$ のように数式が表示される。
別行立ての数式は、\[ ... \]で囲むことで、
のように表示できる。
・・・はずだったのだが、2022/2/4現在、
- このページから他のページに遷移すると、別行立ての数式が残ってしまう（謎）
という問題が発生しており、対処法を検討中...
現在、ページ遷移は、クライアント側で再描画させる（client-side router）設定にしているので、その辺りでMathJaxの実行タイミングとの兼ね合いで問題が発生しているのだと思う。
→サーバー側で数式部分を置換するなどいくつかの方法を考えて試したがうまくいかず、まだベータ版であるSvelteKitのバグだとしたらいくら悩んでも悲しいだけなので、とりあえず client-side router を切ることに...