Texによる数式表現25～KaTeXの利用 - つれづれなる備忘録

1. KaTex
2. KaTexの導入方法
3. KaTex使用例
4. まとめ

1. KaTex

　前回までMathJax3.0の利用法を紹介したが、今回はKaTexについて紹介する。KaTexとはMathJaxと同様にWeb上に数式を表示するJavascriptライブラリであるが、表示が早いことを特徴としている。KaTexの公式サイト KaTeX – The fastest math typesetting library for the webにもMathJaxと比較してレンダリングが早いことを強調している。

atatat.hatenablog.com

(追記2020.09.21): CDNサイトへのプライバシーエラーによりChromeなどで数式表示できない。対策は下記参照

Texによる数式表現37～MathJax, KaTeX表示トラブルの要因・解決 - つれづれなる備忘録

Texによる数式表現38～MathJaxの表示トラブル解決法 - つれづれなる備忘録

2. KaTexの導入方法

公式サイト上のinstallationでもよいが、KaTeX による数式の表示のコードを参考にした。以下のコードをページ内などに記述する。最後ラインのコードは$$で囲うとdisplay:trueとして数式が独立で表示され、$で囲うとdisplay:falseとしてインラインで表示できるという設定をしている。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<script>$(document).ready(function(){renderMathInElement(document.body,{delimiters: [{left: "$$", right: "$$", display: true},{left: "$", right: "$", display: false}]})});</script>

3. KaTex使用例

　とりあえずサイトトップのサンプルを（マクロで定義された\fはなし）入力すると

$$ f(x) = \int_{-\infty}^\infty\hat f ( \xi ) \,e^{2 \pi i \xi x}\,d\xi$$

$$ f(x) = \int_{-\infty}^\infty\hat f ( \xi ) \,e^{2 \pi i \xi x}\,d\xi$$

$$\dfrac{1}{\left( \sqrt{\phi \sqrt{5}}-\phi \right)e^{\frac{2}{5}\pi} }=1+\cfrac{e^{-2\pi}}{1+\cfrac{e^{-4\pi}}{1+\cfrac{e^{-6\pi}}{1+\cfrac{e^{-8\pi}}{1+\cdots} } } }$$

$$\dfrac{1}{\left( \sqrt{\phi \sqrt{5}}-\phi \right)e^{\frac{2}{5}\pi} }=1+\cfrac{e^{-2\pi}}{1+\cfrac{e^{-4\pi}}{1+\cfrac{e^{-6\pi}}{1+\cfrac{e^{-8\pi}}{1+\cdots} } } }$$

$$ \left( \sum\_{k=1}^{n} a\_{k} b\_{k} \right)^{2} \leq \left( \sum\_{k=1}^{n} a\_{k} \right)^{2} \left( \sum\_{k=1}^{n} b\_{k} \right)^{2}$$

$$ \left( \sum_{k=1}^{n} a_{k} b_{k} \right)^{2} \leq \left( \sum_{k=1}^{n} a_{k}^{2} \right) \left( \sum_{k=1}^{n} b_{k}^{2} \right)$$

$$1+\dfrac{q^{2}}{(1-q)}+\dfrac{q^{6}}{(1-q)(1-q^{2})}+\cdots = \prod\_{j=0}^{\infty}\dfrac{1}{(1-q^{5j+2})(1-q^{5j+3})} \  \ \ \rm{for} \  |q|<1$$

$$1+\dfrac{q^{2}}{(1-q)}+\dfrac{q^{6}}{(1-q)(1-q^{2})}+\cdots = \prod_{j=0}^{\infty}\dfrac{1}{(1-q^{5j+2})(1-q^{5j+3})} \ \ \ \rm{for} \ |q|<1$$

数式の量によると思うが、本ブログ程度の数式の量だとMathJaxより明確に表示が早くなったようには感じられないように思える。（はてな記法のTeXよりかは、いずれも早く表示される感覚はある）ブログ全体では、数式表示よりも他のパーツのロードに時間を要している。

数式だけでなく数式を装飾するコマンドも用意されている。

$\boxed{\pi=\frac{c}{d}}$

$\textcolor{blue}{F=ma}$

KaTeX独自と思われるコマンドもある。例えば、

$\KaTeX$

$\xleftrightharpoons{abc}$

$\xLeftrightarrow{abc}$

など

以下公式ドキュメントにコマンド一覧が記載されている。

Supported Functions · KaTeX

Support Table · KaTeX

4. まとめ

　数式の表示速度が速いとされるKaTeXの導入と利用例について紹介した。数式の量が多くなければMathJax(+physics)とロード時間があまり変わらないので、コード記述が簡単な分だけMathJaxの方が使い勝手がよいかもしれない。