Skip to content
向野而深的博客
Go back

如何在 Astro 博客文章中添加 LaTeX 公式

Updated:
目录

本文档演示了如何在 AstroPaper 的 Markdown 文件中使用 LaTeX 公式。LaTeX 是一种强大的排版系统,常用于数学和科学文档。

黑板上复杂的公式特写,展示了化学和数学符号的免费图片。图片来源:Pexels
图片来源:Vitaly Gariev

说明

在本节中,你将找到关于如何在 AstroPaper 的 Markdown 文件中添加 LaTeX 支持的说明。

  1. 运行以下命令安装必要的 remark 和 rehype 插件:

    pnpm install rehype-katex remark-math katex
  2. 更新 Astro 配置以使用这些插件:

    // ...
    import remarkMath from "remark-math";
    import rehypeKatex from "rehype-katex";
    
    export default defineConfig({
      // ...
      markdown: {
        remarkPlugins: [
          remarkMath,
          remarkToc,
          [remarkCollapse, { test: "Table of contents" }],
        ],
        rehypePlugins: [rehypeKatex],
        shikiConfig: {
          // 更多主题请访问 https://shiki.style/themes
          themes: { light: "min-light", dark: "night-owl" },
          wrap: false,
        },
      },
      // ...
    });astro.config.ts
  3. 在主布局文件中导入 KaTeX CSS

    ---
    import { SITE } from "@config";
    
    // astro 代码
    ---
    
    <!doctype html>
    <!-- 其他元素 -->
    <meta property="og:image" content={socialImageURL} />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
    />
    
    <body>
      <slot />
    </body>src/layouts/Layout.astro
  4. 最后一步,在 typography.css 中为 katex 添加文本颜色。

    @plugin "@tailwindcss/typography";
    
    @layer base {
      /* 其他类 */
    
      /* Katex 文本颜色 */
      .prose .katex-display {
        @apply text-foreground;
      }
    
      /* ===== 代码块与语法高亮 ===== */
      /* 其他类 */
    }src/styles/typography.css

这就完成了!此设置允许你在 Markdown 文件中编写 LaTeX 公式,构建站点时它们将被正确渲染。一旦设置完成,文档的其余部分将正确显示。


行内公式

行内公式写在单个美元符号 $...$ 之间。以下是一些示例:

  1. 著名的质能方程:$E = mc^2$
  2. 二次方程求根公式:$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
  3. 欧拉恒等式:$e^{i\pi} + 1 = 0$

块级公式

对于更复杂的公式,或者当你希望公式独占一行显示时,请使用双美元符号 $$...$$

高斯积分:

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

黎曼 ζ 函数的定义:

$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$

微分形式的麦克斯韦方程组:

$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
\end{aligned}
$$

使用数学符号

LaTeX 提供了广泛的数学符号:

  • 希腊字母:$\alpha$, $\beta$, $\gamma$, $\delta$, $\epsilon$, $\pi$
  • 运算符:$\sum$, $\prod$, $\int$, $\partial$, $\nabla$
  • 关系符:$\leq$, $\geq$, $\approx$, $\sim$, $\propto$
  • 逻辑符号:$\forall$, $\exists$, $\neg$, $\wedge$, $\vee$


Previous Post
如何在 AstroPaper 博客文章中的生成动态 OG 图片
Next Post
如何配置 AstroPaper 主题