Astroでブログを書いている中で、数式を使いたいと思い、KaTeXを使ってLaTeX形式の数式の表示を実装しました。以下、その手順をご紹介します。

ステップ1: プラグインのインストール

まず、rehype-katexとremark-mathをインストールします。

npm install rehype-katex remark-math

次に、astro.config.mjsを編集して、プラグインを設定します。

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
});

ステップ2: CSSの追加

数式を綺麗に表示するために、KaTeXのCSSをプロジェクトに追加します。

// src/layouts/Layout.astro （または任意のコンポーネント）
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vZTGshhcJwVjMEcoCsoDhbLMegZbDrg6eRmFwhl/8tSru3CTb5EgGF9aFLPeANtO" crossorigin="anonymous">
</head>

ステップ3: KaTeXで数式をレンダリング

数式をKaTeXでレンダリングするには、以下のように数式を囲みます。

インライン数式: $...$ で囲む
ブロック数式: $$...$$で囲む

例:

$\sqrt{3x-1}+(1+x)^2$

結果:
$\sqrt{3x-1}+(1+x)^2$

まとめ

この手順を使えば、AstroでKaTeXを利用して簡単に数式を表示できます。