$\KaTeX$ を導入しました

本サイトの数式表示

本サイトでは以前は 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$ の使い方と気になった点

関数リスト

複数行数式：\begin{aligned}...\end{aligned} (利用可能な環境一覧: array, matrix, bmatrix, Bmatrix, pmatrix, vmatrix, Vmatrix, aligned, alignedat, gathered, cases, darray, dcases)
フォント指定：\mathrm, \mathbf, \mathit, \mathsf, \mathtt, \textrm, \textbf, \textit, \textsf, \texttt, \rm, \bf, \it, \sf, \tt, \textnormal, \bold, \Bbb, \mathcal, \frak, \text, \boldsymbol, \mathb, \mathscr, \mathfrak, \bm (例：太字ギリシャ文字 \boldsymbol; 数式中のテキスト表示：\text{})

記号等のリスト
オプションの一覧 (マクロの定義例なども載っています)
添字の読みやすさを考慮して、フォントサイズがデフォルトで1.21倍になっている (cssで設定が可能; .katex { font-size: 1em !important; })
全体的に機能は MathJax より限定的だが開発が進んできており、とにかく高速でよい (本サイトでの使用例)
MathJax 3 が公開されました (2019/9/5)、2と比べるとかなり高速になっています (ベンチマーク)。定期的に新バージョンもリリースされています (2021/6/17にはv3.2.0が出ていました)。

履歴

2021/08/30 v0.13.6に更新
2020/07/14 v0.12.0に更新
2020/02/27 v0.11.1に更新
2019/06/13 v0.10.2に更新
2018/08/02 v0.10.0-betaに更新
2018/04/17 v0.9.0に更新、補足情報を追記
2017/12/26 v0.9.0-alpha2に更新
2017/04/27 公開