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

KaTeXのテスト

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

追記:2018.08.01】デリミタの記述順で発生していた不具合を修正しました。
追記:2018.08.03】はてなキーワードが独立した数式に干渉する問題に対処しました。
追記:2018.08.06】KaTeX で TeX ソースを表示する方法にリンクしました。

テスト

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

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

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

感想

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

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

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

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

ブログのソース

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

※ テスト用の簡易的な使用方法です。本格的に使うのであれば、ブログの管理画面で「設定 → 詳細設定 → headに要素を追加」でカスタマイズした方が良いでしょう。

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

<table><tr align="center"><th>MathJax</th><th>KaTeX</th></tr>
<tr><td>
<div>\[x=\frac{-b±\sqrt{b^2-4ac}}{2a}\]</div>
<div>\[f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right)\]</div>
<div>\[i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ\]</div>
<div>\[rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}\]</div>
</td><td>
<div class="math-render">x=\frac{-b±\sqrt{b^2-4ac}}{2a}</div>
<div class="math-render">f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right)</div>
<div class="math-render">i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ</div>
<div class="math-render">rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}</div>
</div></td></tr></table>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    let e1 = document.getElementsByClassName("math-render");
    for (let i = 0; i < e1.length; ++i) {
        let e = e1[i];
        if (!e.mathRendered) {
            try {
                katex.render(e.textContent, e, { displayMode: true });
            } catch (ex) {
                e.textContent = ex.message;
            }
            e.mathRendered = true;
        }
    }
    let e2 = document.getElementsByClassName("entry-content");
    for (let i = 0; i < e2.length; ++i) {
        renderMathInElement(e2[i],
            { delimiters: [{ left: "$", right: "$", display: false }] });
    }
});
</script>

行内の数式はデリミタ $$ を指定しています。好きなものに変更できます。ただし数式がはてなキーワードのリンク対象となります。数式が表示されない時は下線部を探して、スペースを入れるなどの小細工が必要です。

例:$k-1$ $k-1$ → $k - 1$ $k - 1$

独立した数式は専用の class を指定してループで KaTeX を呼び出しています。そのため特別なデリミタは使用しません。はてなキーワードが干渉することへの対策として、KaTeX に textContent を渡すことでリンクを無視します。

はてなブログは一箇所でも [tex:] を記述して MathJax を読み込むと、$$$$\[\] を MathJax が処理するようです。今回はそれを利用しています。ただし正式サポートなのか不明で、はてなキーワードも干渉します。

補足

今回は使用しませんが、もし独立した数式も renderMathInElement() で処理してデリミタに $$ を使用する場合、$$$ より先に書く必要があります。

{ delimiters:
    [{ left: "$$", right: "$$", display: true  },
     { left: "$" , right: "$" , display: false } ]}

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

機能

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

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

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

参考

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

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