Kengo Nagashima



本サイトの数式表示

本サイトでは以前は MathJax を使って数式表示をしていましたが、数式の表示に時間がかかる点が気になっていました。 $\KaTeX$ は MathJax よりもかなり高速に描画が可能 (KaTeX and MathJax Comparison Demo) なライブラリで、描画時間が数十分の一になるようなので導入することにしました。

$\KaTeX$ の導入メモ

導入は、KaTeXのREADME および Auto-renderのREADME を参考にしました。

上記説明を参考にして、本サイトでは CDN を利用したので、<head> ... </head>の間の適当な位置に以下を追加しました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.js" integrity="sha384-OMvkZ24ANLwviZR2lVq8ujbE/bUO8IR1FdBrKLQBI14Gq5Xp/lksIccGkmKL8m+h" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/contrib/auto-render.min.js" integrity="sha384-cXpztMJlr2xFXyDSIfRWYSMVCXZ9HeGXvzyKTYrn03rsMAlOtIQVzjty5ULbaP8L" crossorigin="anonymous"></script>

\[ ... \]$$ で数式を埋め込みたいので、auto-render extension を利用しました。 本サイトでは以下の命令文を使いました。

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

html 読み込み時に描画する時は </body> の直前に書くとよいらしい。 また JavaScript 中で動的に呼び出す時にも同様に renderMathInElement(elem, options) と書くと描画が可能でした。

上記はv0.9.0-alpha2の例ですので、最新版をチェックして導入した方がよいかもしれません。

$\KaTeX$ の使い方で気になった点 (version 0.7.1)

履歴