軽量な数式組版ライブラリ KaTeX の導入メモ

$\KaTeX$

$\text{\KaTeX}$ は JavaScript で書かれた web のための数式組版ライブラリです。レイアウトは $\text{\TeX}$ を元にしていて、下のように数式を美しく表示させることができます。

ディスプレイ数式の例

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

インライン数式の例

任意の直角三角形について、斜辺 $c$ と他の 2 辺 $a$ , $b$ との関係は、 $a^2 + b^2 = c^2$ である。

使い方

GitHub レポジトリは Khan/KaTeX です。

インストールは、直接ダウンロードするか、 CDN を使います。※最新の URL はレポジトリをしてください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>

$\text{KaTeX}$ は次の 2 つのメソッドを提供します。

katex.render(str, element): DOM エレメント element 内に文字列str を数式とみなしてレンダリングする。
katex.renderToString(str): 文字列 str を数式とみなしてレンダリングし, HTML 形式で出力する。

しかし、これらを使うよりも、 Auto-render extension を使うのが楽でしょう。

Auto-render extension

Auto-render extension は、引数で与えられて DOM 内のコンテンツから数式を KaTeX に渡す関数 renderMathInElement(element) を提供します。

デフォルトの挙動

$$...$$, \[...\] に囲まれた文字列を数式とみなしディスプレイ表示でレンダリングする.
$...$ に囲まれた文字列を数式とみなしインライン表示でレンダリングする.
タグ <script>, <noscript>, <style>, <textarea>, <pre>, <code> 内の文字列は無視される.

カスタマイズ

また、次のようにオプションを設定することもできます。上で述べたデフォルトの設定を以下に示します。

renderMathInElement(element, {
    delimiters: [
        { left: "$$",  right: "$$",  display: true  },
        { left: "\\[", right: "\\]", display: true  },
        { left: "\\(", right: "\\)", display: false },
    ],
    ignoreTags: ["script", "noscript", "style", "textarea", "pre", "code"],
    errorCallback: console.error,
});

実際の使用例

（執筆現在、）実際に本サイトでは次のようにして使っています。

document.addEventListener('DOMContentLoaded', function() {
    renderMathInElement(document.body, {
        delimiters: [
            { left: "$",   right: "$",   display: false },
            { left: "\\[", right: "\\]", display: true  },
        ],
    });
});

この例では, $...$ がインライン数式として, \[...\] がディスプレイ数式として, それぞれレンダリングされる.

markdown-it-katex

Markdown を HTML に変換する markdown-it/markdown-it で、 KaTeX を有効にするプラグイン @iktakahiro/markdown-it-katex があります。（同名のプラグインで fork 元の markdown-it-katex がありますが、こちらは今ではメンテナンスされていないようです。）

var md = require('markdown-it')()
    .use(require('@iktakahiro/markdown-it-katex'))

参考サイト

"javascript で LaTeX : KaTeX がすごい," Xeebi, 18th September, 2014. [Accessed: 1st April, 2017].