KaTeXメモ

LaTeX KaTeX

ブログに$\KaTeX$を導入したので、使い方などについてのメモ。

$\KaTeX$は、Khan Academyが開発している、Webブラウザ上で動作する数式描画ライブラリです。有名な数式描画ライブラリとしてMathJaxがありますが、描画速度が若干遅いという欠点があります。それに対して$\KaTeX$は、高速に描画できることを売りにしているようです。

  • Fast: KaTeX renders its math synchronously and doesn’t need to reflow the page.
  • Print quality: KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
  • Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
  • Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.
KaTeX – The fastest math typesetting library for the web

はてなブログで$\KaTeX$を使用する

自分のブログの「詳細設定」「headに要素を追加」の部分に以下のコードを記述するだけで、$\KaTeX$を使用することが出来ます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js"></script>
<script>// <![CDATA[
document.addEventListener("DOMContentLoaded", function(){
  renderMathInElement(
    document.body,{
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}]})});
// ]]></script>

使い方

$で数式を囲むとインライン数式モードとなり、文章中に数式を表示できます。ディスプレイ数式モードで表示したいときは$$で囲みます。

$$ f(x) = x^2 $$

$$ f(x) = x^2 $$

これらの区切り文字を変えたいときは、headに記述したdelimitersの中身を書き換えます。

$\KaTeX$では、aligned環境を使うことができ、複数行の数式を書けます。例えば、

$$ \begin{aligned} f(x) & = x^2+2x+1 \\ & = (x+1)^2 \end{aligned} $$

と書くと、

$$ \begin{aligned} f(x) & = x^2+2x+1 \\ & = (x+1)^2 \end{aligned} $$

と表示されます。

array環境などを使うことで、行列も表示できます。

$$
A = \left( \begin{array}{cccc} 
a_{11} & a_{12} & \ldots & a_{1n} \\ 
a_{21} & a_{22} & \ldots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \ldots & a_{mn} 
\end{array} \right) $$

$$ A = \left( \begin{array}{cccc} a_{11} & a_{12} & \ldots & a_{1n} \\ a_{21} & a_{22} & \ldots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \ldots & a_{mn} \end{array} \right) $$


なお、はてなブログでは改行すると<br />が挿入されてしまうので、LaTeXのコードを複数行にわたって記述する場合はpタグ停止記法を使う必要があります。

$\KaTeX$は開発途中であり、サポートしていない機能もあるようです。Function Support in KaTeX · Khan/KaTeX Wiki · GitHubに、現在使用可能な機能が書かれています。

また、はてなブログでKaTeXを使う - kivantium活動日記にもあるように、はてなブログのキーワードリンク機能によって一部表示できない文字があるので、注意が必要です(一応スペースを入れて$ m $と書くことで$ m $と表示できるけど、使い勝手は悪そうです)。

参考

$\KaTeX$導入にあたって、以下のサイトを参考にさせていただきました。

GitHub - Khan/KaTeX: Fast math typesetting for the web.
はてなブログでKaTeXを使う - kivantium活動日記
javascript で LaTeX : KaTeX がすごい - Xeebi
にっき♪: KaTeXの検索結果