数式は、特に技術的なコンテンツにおいて複雑なアイデアを伝える上で重要な役割を果たしています。このブログでは、remark-mathとrehype-katexの強力な組み合わせを使用して、Astro の.mdx ファイルで数式の組版を有効にする方法について探ってみましょう。
ステップ 1: 📦 パッケージのインストール#
プロセスを開始するために、remark-mathとrehype-katexの必要なパッケージをインストールする必要があります。ターミナルを開き、以下のコマンドを実行してください:
$ npm install remark-math rehype-katex
-
remark-math: このパッケージは Markdown の機能を拡張し、数式のシームレスなサポートを可能にします。 -
rehype-katex: KaTeX との連携を特に重視したこのパッケージは、Markdown ファイル内の数式のレンダリングを高速かつ効率的に処理します。
ステップ 2: 📝 Astro の設定ファイルの変更#
さて、Astro の設定ファイル（astro.config.tsまたはastro.config.mjs）を変更して、これらのパッケージを組み込みましょう。以下のようにremark-mathとrehype-katexをインポートして有効にします:
import { defineConfig } from 'astro/config'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
export default defineConfig({
//
markdown: {
remarkPlugins: [remarkMath],
rehypePlugins: [
[
rehypeKatex,
{
// Katexプラグインのオプション
}
]
]
}
})
ステップ 3: 🪄 KaTeX の Auto-render 拡張機能の使用#
HTML ページ全体で数式をレンダリングするために、Markdown ページの Astro レイアウトファイルの head タグに KaTeX の Auto-render 拡張機能を追加します。./src/layouts/の下にレイアウトファイルを見つけるか作成し、Auto-render Extensionで最新の Katex コードスニペットを見つけてください。
<html lang="en" class="scroll-smooth">
<head>
<!-- Katex -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
crossorigin="anonymous"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8"
crossorigin="anonymous"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
</head>
<body>
<slot />
</body>
</html>
✌️ 結論#
Astro の.mdx ファイルで数式の組版を有効にするには、remark-mathとrehype-katexの強力な組み合わせを使用することで、スムーズなプロセスが実現します。この統合により、数式をシームレスに含めて美しくレンダリングすることができ、読者に明確さと正確さを提供することができます。技術的な著者または数学的なコンテンツを扱う人であっても、このアプローチによりスムーズなワークフローと向上した読書体験が確保されます。