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$
結果:
まとめ
この手順を使えば、AstroでKaTeXを利用して簡単に数式を表示できます。