KaTeX のテストです。比較のため MathJax と並べます。

【2020.04.02】for ～ of を使用しました。
【2020.03.14】使用方法を追記しました。
【2020.02.04】MathJax 関連の仕様変更に対応しました。
【2019.12.05】行内の数式の注意点について追記しました。
【2019.11.23】KaTeX を 0.11.1 にアップデートしました。
【2018.08.06】KaTeX で TeX ソースを表示する方法にリンクしました。
【2018.08.03】はてなキーワードが独立した数式に干渉する問題に対処しました。
【2018.08.01】デリミタの記述順で発生していた不具合を修正しました。

目次

比較

感想

使用方法

ブログのソース

行内の数式の注意点

補足

機能

参考

比較

MathJax では $c=\pm\sqrt{a^ 2+b^ 2}$ です。
KaTeX では $[c=\pm\sqrt{a^ 2+b^ 2}]$ です。

MathJax	KaTeX
$\displaystyle{x=\frac{-b±\sqrt{b^2-4ac}}{2a}}$	x=\frac{-b±\sqrt{b^2-4ac}}{2a}
$\displaystyle{f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right)}$	f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right)
$\displaystyle{i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ}$	i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ
$\displaystyle{rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}}$	rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}

上から二次方程式の解の公式、正規分布、シュレーディンガー方程式、ブラック–ショールズ方程式です。👉取得方法

感想

KaTeX は確かに速いです。特にスマホではその違いは大きいです。

自前のスクリプトから KaTeX を呼んでいるため、エラーメッセージも取得できます。それを表示するようにした所、どこが間違っているのか分かりやすくなりました。

MathJax では右クリックのメニューで TeX のソースが取得できますが、KaTeX にはその機能がありません。以下の記事ではそれに相当する機能を自前で実装しています。

KaTeXでTeXのソースを表示

Markdown との干渉は MathJax と同様に発生します。対処方法も基本的に同じです。詳細は以下の記事を参照してください。

使用方法

行内の数式は $ ～ $ で囲みます。Markdown モードでは ^ や _ が干渉するため、演算子の両側にスペースを入れます。

【例】$[x ^ 2 = y ^ 2 + z ^ 2]$ を $[x]$ について解けば $[x = \pm\sqrt{y ^ 2 + z ^ 2}]$ です。

独立した数式は <div class="math-render"> ～ </div> で囲みます。このようにすることではてなブログ特有の問題が回避できるため、行内の数式のように演算子の両側にスペースを入れる必要はありません。

x=\frac{-b±\sqrt{b^2-4ac}}{2a}

ブログのソース

ブログの設定（ヘッダのカスタマイズなど）はデフォルトのまま、KaTeX 関係をベタ書きしただけで使えます。

※ テスト用の簡易的な使用方法です。本格的に使うのであれば、ブログの管理画面で「設定 → 詳細設定 → headに要素を追加」でカスタマイズした方が良いでしょう。カスタマイズには一定の知識が必要となるため自己責任でお願いします。

行内の数式はデリミタ $ ～ $ を指定しています。好きなものに変更できます。ただし Markdown やはてなキーワードが干渉します。（後述）

独立した数式は専用の class を指定してループで KaTeX を呼び出しています。そのため特別なデリミタは使用しません。<div> で囲んだ部分は Markdown が干渉することはなく、はてなキーワードもスクリプトで対策しているため（e.textContent の部分）、特に干渉を気にせずに書けます。

行内の数式の注意点

行内の数式は Markdown やはてなキーワードが干渉するため、細工が必要な場合があります。（独立した数式では不要です）

^ や _ は Markdown が干渉するため、スペースを空けます。

例： $a_1^2+a_2^2$ $a_1²+a_2²$ → $a _ 1 ^ 2+a _ 2 ^ 2$ $[a _ 1 ^ 2+a _ 2 ^ 2]$

\{ ～ \} のバックスラッシュは二重にする必要があります。

例： $\{a,b\}$ $[{a,b}]$ → $\\{a,b\\}$ $[\{a,b\}]$

はてなキーワードが反応すると数式が表示されません。数式が表示されない時は下線部を探して、スペースを入れるなどの小細工が必要です。

例： $k-1$ $k-1$ → $k - 1$ $[k - 1]$

補足

干渉の問題があるため推奨しませんが、もし独立した数式も renderMathInElement() で処理してデリミタに $$ を使用する場合、$$ を $ より先に書く必要があります。

  let katexOptions = { delimiters: [
    { left: "$$", right: "$$", display: true  },
    { left: "$" , right: "$" , display: false }
  ]};

指定するデリミタは記述した順にサーチが行われるため、$ を先に書けば $$ の箇所にも $ がマッチしてしまい、中身が空の数式として処理されてしまいます。実際それでハマりました。

~~はてなブログは一箇所でも [tex: ～ ] を記述して MathJax を読み込むと、$$ ～ $$ や \[ ～ \] を MathJax が処理するようです。~~そのため KaTeX で $$ ～ $$ を使用する場合、 [tex: ～ ] の使用は避けます。