kivantium活動日記

プログラムを使っていろいろやります

はてなブログでKaTeXを使う

はてな記法には数式を表示するためのtex記法が用意されています。
はてなブログでの数式表示はGoogle Charts APIを使っているようでそこそこ遅いです。
はてなブログの数式レンダリングが遅いとTwitterに嘆いていたところ、KaTeXという高速な数式レンダリングライブラリを教えてもらったので、はてなブログで動かせるようにしました。

注意！
はてなブログではPro契約していない人はキーワードリンクが設定されます。mなどの文字はキーワードと認識されてしまい、KaTeXが正しくレンダリングできないことが分かりました。キーワードと認識されない文字列しかない数式なら以下の方法でできるようですが、そうではない場合は以下の方法で動きません。つまり、この方法は使い物になりません。

設定

「設定」→「詳細設定」→「headに要素を追加」に

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/contrib/auto-render.min.js"></script>
<script>$(document).ready(function(){renderMathInElement(document.body,{delimiters: [{left: "$$", right: "$$", display: true},{left: "$", right: "$", display: false}]})});</script>

を追加するだけです。

上3行ではKaTeXを使うのに必要なCSSとJavascriptを読み込んでいます。
最後の行ではjQueryを使ってDOMの読み込みが終わったら数式レンダリングするように指定しています。
delimitersの指定では$$で囲まれた部分はdisplayモード（独立した行で中央揃え）、$で囲まれた部分は非displayモード（行内の数式）で表示するようにしています。ここを書き換えれば数式部分の指定を好きな記号にすることができます。
はてなブログはjQueryを標準で読み込んでいるので特に追加の記述をしなくてもjQueryを使えます。（仕様変更があったら分かりませんが……）

使い方

本文で$で囲んだ部分は行内の数式に、$$で囲んだ部分は独立した数式になります。

比較

（上）KaTeXによるレンダリング
$$-\frac{\hbar}{i}\frac{\partial \psi}{\partial t} = -\frac{\hbar^2}{2m} \triangle \psi$$
$$f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

（下）はてなブログ標準の数式レンダリング(Google Chart APIを使っている）
\displaystyle -\frac{\hbar}{i}\frac{\partial \psi}{\partial t} = -\frac{\hbar^2}{2m} \triangle \psi
\displaystyle f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi


（KaTeXの方のソース）

$$\displaystyle -\frac{\hbar}{i}\frac{\partial \psi}{\partial t} = -\frac{\hbar^2}{2m} \triangle \psi$$
$$\displaystyle f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

上で書いたようにレンダリングはDOMの読み込みが終わってから行われるので下の数式の方が速く表示されてしまう場合があるかもしれませんが、単体で使えばもっと高速なはずです。
KaTeXのドキュメントではbodyの最後にレンダリングのscriptを指定するように書かれているのですが、はてなブログの制約でそれは出来ません。
この記事の以前のバージョンで書いていたサイドバーにscriptを書く方法の方が若干速いようですが、dirty hackなのであまり推奨したくないです。

参考: 以前のバージョンでの設定方法（非推奨）
「設定」→「詳細設定」→「headに要素を追加」に

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/contrib/auto-render.min.js"></script>

を追加する。

「デザイン」→「サイドバー」に「HTML」で

<script>renderMathInElement( document.body,{delimiters: [{left: "$$", right: "$$", display: true},{left: "$", right: "$", display: false}]});</script>

を追加する。（名前は適当でよい）

参考

（記事では実験して若干速かったjQueryのreadyを使う方法のほうを採用しています）

使えない記法もあるらしいので注意する必要があります。

広告コーナー