数学的な表現は、特に技術的なコンテンツでは複雑なアイデアを伝える上で重要な役割を果たしています。このブログでは、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>
✌️ 結論#
remark-mathとrehype-katexの強力な組み合わせにより、Astro の.mdx ファイルで数式の組版を有効にすることは、スムーズなプロセスです。この統合により、数学的な表現をシームレスに含めて美しくレンダリングすることができ、読者に明確さと正確さを提供することができます。技術的な著者または数学的なコンテンツを扱う人であっても、このアプローチによりスムーズなワークフローと向上した読書体験が実現します。