ブログに KaTeX を導入した話

何が起こった？

数日前から今日の夕方まで，このブログが重すぎて表示できませんでした．

設定をいじることでどうにかしようとしても，ブログ管理画面の「デザイン」画面も，さらにいうと記事編集画面でのプレビューも途中で表示が止まってしまっていました．

何が原因？

正確なところはわかりませんが，2つ考えています．自分では原因が1つに絞れたと思い込んだまま KaTeX 化を進めてしまったため，どちらが本当の理由なのかは調べることができなくなってしまいました．

まず最も可能性が高いのが，CDN の URL が古くなっていたというもの．このブログを始めた頃に，古いブログ記事を参考にして MathJax を導入しようとしていたことがありました．結局はてな記法で数式を書けば内部的に MathJax を使ってくれることがわかったのですが，このとき古いブログ記事を参考にして書いてしまった script タグが設定に残ったままになっていました．この script タグは KaTeX 導入直後に偶然発見し，「何これいらないじゃーん」と何気なく消してしまいました．もし本当にこれが原因だったらただ単に私の怠惰だけが招いた事態ということになります……．せめて一次ソースなりもっと新しいソースなりを探すべきでしたし，参照した URL もどこかに残しておくべきでした．私が怠惰すぎるだけで常識のはずなんですけどね．

そして最初に原因だと思い込んでいたのが，はてな記法の tex 記法による数式を多用していたこと．

実際，数式を使っていないページに URL で直接アクセスすると，かなり重くはありますがかろうじて表示されてはいました．

前述の通り，はてなブログでの tex 記法は内部的に MathJax を使っているそうです．MathJax はTeXソースの取得など，次の解決策の部分で触れる KaTeX にはできないことが色々できますが，その分 KaTeX よりずっと重いです．特に最近は Convex Hull Trick を使う問題を中心に解説していて式変形の過程なども記事にしていたために，表示に時間がかかりすぎる重い数式がブログ内に急激に増えていました．そのため，最新記事を並べて表示しているトップページを中心にブログが重くなってしまったという可能性があります．

まあ，多分本当の原因は前者です……．

どうやって直した？

色々調べているうちに，$\KaTeX$ というブラウザで数式を表示するための軽量な JavaScript ライブラリにたどり着きました．CDN を通してライブラリを導入する必要がありますが，GitHub - KaTeX/KaTeX: Fast math typesetting for the web. をベースに一部 KaTeXメモ - terablog を参考に head 要素内に script タグを追加しました．

最初は最新の3記事ほどを手動で KaTeX を使った記法に変えてみましたが，相変わらずブログはトップページの表示におぼつかないままだったので，全記事 KaTeX を使った記法に書き換えることにしました．(本当はこの時に全記事書き換えるより先に変な script タグがないかチェックするべきだったんですけどね．)

全記事手動で書き換えるのはあまりに面倒なので，以下の方法で書き換えました．

全記事エクスポート: ブログの管理者画面の 設定>詳細設定>エクスポート からできます．
正規表現で書き換え: 1. で取得したファイルを開き，<img src="[^"]*" alt="\{\\displaystyle を $ に，\}"/> も $ に置換します (エクスポート時に tex 記法の部分が URL による画像参照に変換されているため)．
全記事削除: 「記事の管理」で全ての記事を削除します．
全記事インポート: 管理者画面に「インポート」というメニューがあります．

これで無事にブログが表示されるようになりました．TeX ソース取得などはできなくなりましたが，表示するだけなら KaTeX のほうがずっと高速です．

しかし，全記事削除するタイミングを間違えたり，かぶった記事を削除する時にどちらを削除すればいいのかいい加減だったりして，一部記事の URL が変わってしまいました．ブックマークしてくれていた方々に申し訳ないです．