Kengo Nagashima



本サイトの数式表示

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

$\KaTeX$ の導入メモ

導入は、KaTeXのREADME を参考にしました。

上記説明を参考にして、<head> ... </head>の間の適当な位置に以下を追加しました。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.js" integrity="sha384-31El76TwmbHj4rF9DyLsygbq6xoIobG0W+jqXim+a3dU9W53tdH3A/ngRPxOzzaB" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>

本サイトでは \[ ... \]$$ で数式を埋め込みたいので、auto-render extension を利用しています。 html 読み込み時に描画する時は </body> の直前に auto-render extension の設定を書くとよいようです? 本サイトでは以下のコードを使っています (</body> の直前に配置)。

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

また JavaScript 中で動的に呼び出す時にも同様に renderMathInElement(elem, options) と書くと描画が可能でした (Web アプリの中で使っています)。

上記は v0.13.16 の例ですので、最新版をチェックして導入した方がよいでしょう。

$\KaTeX$ の使い方と気になった点

履歴