在Astro .mdx中的数学排版：使用remark-math和rehype-katex

数学表达式在传达复杂思想中起着至关重要的作用，特别是在技术内容中。在本博客中，我们将探讨如何使用强大的 remark-math 和 rehype-katex 组合在 Astro 的 .mdx 文件中启用数学排版。

result

第一步：📦 安装包#

为了启动这个过程，我们需要安装必要的包 - remark-math 和 rehype-katex。打开终端并运行以下命令：

$ npm install remark-math rehype-katex

remark-math：这个包扩展了 Markdown 的功能，允许无缝支持数学表达式。
rehype-katex：专门设计用于与 KaTeX 一起工作，这个包以速度和效率处理 Markdown 文件中的数学表达式的渲染。

第二步：📝 修改 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 插件选项
				}
			]
		]
	}
})

第三步：🪄 在 Katex 中使用自动渲染扩展#

为了在整个 HTML 页面上渲染数学公式，我们将在 Astro 布局文件的头部标签中添加 KaTeX 的自动渲染扩展，用于 Markdown 页面。在 ./src/layouts/ 下找到或创建布局文件。在自动渲染扩展上找到最新的 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 文件中启用数学排版是一个简化的过程。这种集成增强了您的内容，使您能够无缝地包含和美观地渲染数学表达式，为读者提供清晰和精确的信息。无论您是技术作者还是处理数学内容的任何人，这种方法都能确保流畅的工作流程和增强的阅读体验。