【お知らせ】プログラミング記事の投稿はQiitaに移行しました。

KaTeXのテスト

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

【2020.04.02】forof を使用しました。
【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}]$ です。

MathJaxKaTeX
\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 にはその機能がありません。以下の記事ではそれに相当する機能を自前で実装しています。

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に要素を追加」でカスタマイズした方が良いでしょう。カスタマイズには一定の知識が必要となるため自己責任でお願いします。

CC0

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

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

行内の数式の注意点

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

^_Markdown が干渉するため、スペースを空けます。

例:$a_1^2+a_2^2$ $a_12+a_22$ → $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:] の使用は避けます。

【注意】2020年2月4日現在、MathJax がデリミタを処理しなくなったようです。

機能

MathJax とはサポートされている機能が若干異なります。代表的な違いを挙げます。

  • \begin{align}\end{align} は使えません。サポートされているのは \begin{aligned}\end{aligned} です。
  • 日本語の文字(漢字や仮名)は \text{} で囲む必要があります。

KaTeX の振る舞いを調べるには以下の環境が便利です。数式メモとしても実用的です。

参考

本家のドキュメントです。

以下の記事を参考にさせていただきました。