数式表示の重さに悩んでいたら、KaTeXで解決した

はじめに

技術ブログや学習サイトで数式を表示したいとき、多くの人がまず候補に挙げるのがMathJaxです。しかし実際に導入してみると、ページ全体の再描画（リフロー）が発生してガタつく、数式が多いページでは表示が遅い、といった悩みに直面した経験はないでしょうか。

そんな課題を解決してくれるのがKaTeXです。KhanAcademyが開発したこのライブラリは、数式を同期的にレンダリングし、ページのリフローを必要としません。今回はKaTeXの特徴から実践的な使い方まで、順を追って紹介します。

KaTeXとは

KaTeXは、Webブラウザ上で数式を高速かつ高品質に表示するためのJavaScriptライブラリです。レイアウトエンジンはドナルド・クヌース氏が開発したTeXの組版アルゴリズムをベースにしており、数式組版における「金標準」の品質をブラウザ上で再現します。

主な特徴

高速性 - 数式を同期的にレンダリングするため、ページの再フローが発生しません。数式を多数含むページでも高速に表示できます。
依存関係なし - 外部ライブラリへの依存がなく、自己完結型なのでバンドルサイズを抑えたまま導入できます。
サーバーサイドレンダリング対応 - Node.js上で事前に数式をHTML/CSSに変換できるため、静的サイトやSSRとも相性が良いです。
豊富なLaTeX互換性 - LaTeXおよび主要なLaTeXパッケージの多くの構文をサポートしています。

インストール

npmまたはyarnでインストールできます。

npm install katex
# または
yarn add katex

CDN経由で手早く試すことも可能です。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/katex.min.js"></script>

基本的な使い方

最もシンプルな使い方は、katex.renderでDOM要素に直接数式を描画する方法です。

<div id="formula"></div>

<script>
  katex.render(
    "c = \\pm\\sqrt{a^2 + b^2}",
    document.getElementById("formula"),
    { throwOnError: false }
  );
</script>

Node.js環境では、HTML文字列として数式を生成できます。サーバーサイドで事前にレンダリングしたい場合に便利です。

import katex from "katex";

const html = katex.renderToString("E = mc^2", {
  throwOnError: false,
});

console.log(html);
// => <span class="katex">...</span>

実践的なユースケース

Markdownブログに数式を組み込む

このブログのようにMarkdownベースのコンテンツで数式を扱いたい場合、remark-mathとrehype-katexを組み合わせることで、 $...$ や$$...$$の記法をそのままKaTeXでレンダリングできます。

npm install remark-math rehype-katex katex

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkMath from "remark-math";
import remarkRehype from "remark-rehype";
import rehypeKatex from "rehype-katex";
import rehypeStringify from "rehype-stringify";

const processor = unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkRehype)
  .use(rehypeKatex)
  .use(rehypeStringify);

const file = await processor.process(
  "二次方程式の解は $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$ です。"
);

console.log(String(file));

これにより、記事中に埋め込んだLaTeX記法の数式が、ビルド時に静的なHTMLへ変換されます。クライアント側でのJavaScript実行が不要になるため、表示速度と初期描画のちらつき対策の両方に効果的です。

ページ内の複数数式を一括レンダリング

auto-render拡張機能を使うと、ページ内のテキストを自動的にスキャンし、区切り文字で囲まれた数式をまとめてレンダリングできます。

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/contrib/auto-render.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    renderMathInElement(document.body, {
      delimiters: [
        { left: "$$", right: "$$", display: true },
        { left: "$", right: "$", display: false },
      ],
      throwOnError: false,
    });
  });
</script>