BloggerにKaTeXを導入して数式を表示できるようにした

このブログでは数式を表示するためにMathJaxを使用していたが、レンダリングが遅いと思っていた。 そこで昔から存在は知っていたKaTeXを導入してみた。KaTeXは現在v0.9.0である。 対応しているコマンドはこちらから見れる。

まずはKaTeXの性能をみてみよう。 下のGIF画像を見てほしい。 KaTeX demo これだけのTeXの数式も一瞬で読み込まれる。爆速だ!

目次

KaTeXデモ

まずKaTeXのデモを行なう。KaTeXの数式はこんな風に表示される。ここまでの文章を読んでいた場合はとっくに読み込まれているだろう。 ぜひリロードして一瞬で数式に変わる様子を見てほしい。 \[ \KaTeX \] \[ \oint_C \frac{1}{z} dz \] \[ A = \begin{pmatrix} a_{11} & \ldots & a_{1n} \\ \vdots & \ddots & \vdots \\ a_{m1} & \ldots & a_{mn} \end{pmatrix} \] \[ \wp(z;\omega_1, \omega_2) = \frac{1}{z^2} + \sum_{m^2+n^2 \neq 0}\left( \frac{1}{(z+m\omega_1 + n\omega_2)^2} - \frac{1}{(m\omega_1 + n\omega_2)^2} \right) \] $$ _rF_s \left\lbrack \begin{matrix}a_1,a_2,\ldots ,a_r \\ b_1,b_2,\ldots ,b_s\end{matrix} ;z\right\rbrack = \sum_{n=0}^\infty \frac{(a_1)_n(a_2)_n\ldots (a_r)_n}{(b_1)_n(b_2)_n\ldots (b_s)_n\;n!} z^n $$ \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \] \[ 2^{2^{2^{2^{2^{2}}}}} \] 上の数式を書いていて少しハマったのは、\dotsに対応していない点(2018年5月に追記している現在は対応済み)、\left[ \right]には対応していないので、\left\lbrack \right\rbrackと書かないと行けない点などである。 それに加えて、僕はStackEditでブログを書いているため、MathJaxを設定から外した上で、いくつかの文字(例えばバックスラッシュ)をエスケープする必要があった。KaTeX対応のエディタは少ないのは仕方ないが、数式が入った記事はめったに書かないし、読むときは爆速で表示してくれるので、KaTeXのほうがよいと思った。

BloggerへのKaTeXの導入

最後にBloggerへの導入方法を記す。BloggerはHTMLの編集をしてコードを追加してやればいい。一点だけ注意点がある。それはBloggerはXHTMLなので、閉じ括弧が必要な点である。すなわち、 公式では

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
と書いてあるが、
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
と、linkタグの最後にスラッシュが必要である。これをhead内に追加した。
これに加えて、Auto-render extensionを使用した。これがあると、文中に$$\[\]があるといい感じに数式に変換してくれる。
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/contrib/auto-render.min.js"></script>
をhead内に追加し、bodyの最後に
<script>
renderMathInElement(
    document.body,{
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "\\[", right: "\\]", display: true},
            {left: "$", right: "$", display: false}
]});
</script>
を追加した。文中に$$\[\]があるといい感じに数式に変換してくれる。displayがtrueならば数式で独立した一行になり(ディスプレイ数式)、falseならば文中の数式(インライン数式)になる。この辺を含めたAuto-renderの使い方は、Auto-render extensionのREADME.mdに説明がある。

おわりに

ブログにKaTeXを導入して、良かったと思う。なにより表示が早いのがいい。本当のところ、Jupyter notebookにKaTeXを入れたかったのだが、それは今後の課題。 もし、デモで書いて欲しい数式があったら、言ってください。出来るものならやってみるかもしれません。 最後に余談であるが、KaTeXと言われると、YaTeX(野鳥)の親戚のKaTeX(花鳥)を思い浮かべるのは僕だけだろうか。

0 件のコメント :

コメントを投稿