在 Astro-Yi 中显示数学公式

astro-Yi主题，官方说支持公式，但是实际测试下来不支持测试。使用最新版本的 remark-math 和 rehype-katex，进行一些配置可以实现显示公式功能。

1.安装依赖

1
pnpm install remark-math rehype-katex katex

2.编辑 Astro 的配置文件 astro.config.mjs或者 astro.config.js

1
---
2

3
import remarkMath from 'remark-math';
4
import rehypeKatex from 'rehype-katex';
5

6
---
7
export default defineConfig({
8
...
9
  markdown: {
10
    remarkPlugins: ["remarkMath"],
11
    rehypePlugins: ["rehypeKatex"]
12
  },
13
...
14
});

3.编辑 Astro 的配置文件astro.config.json：

1
{
2

3
  "markdown": {
4
    "remarkPlugins": ["remark-math"],
5
    "rehypePlugins": ["rehype-katex"]
6
  },
7
}

4.编辑模板:打开 src/components/BaseHead.astro，在 Frontmatter（也就是文件顶部用“---”包裹起来的部分）中添加一行

1
---
2
import "/node_modules/katex/dist/katex.min.css";
3
---

这行代码不一定要添加到 BaseHead.astro 的 Frontmatter 中，理论上任意一个 .astro 文件都行，只要这个 .astro 文件参与到了含有数学公式的网页的生成即可。例如 src/layouts/BlogPost.astro 等。这种方法是最简便的，Astro 会自动处理 CSS 和字体文件。

转自《在 Astro 中显示数学公式》