How to add LaTeX Equations in Astro blog posts

This document demonstrates how to use LaTeX equations in your Markdown files for AstroPaper. LaTeX is a powerful typesetting system often used for mathematical and scientific documents.

Close-up of complex equations on a chalkboard, showcasing chemistry and math symbols

Photo by Vitaly Gariev

Instructions

In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper.

Install the necessary remark and rehype plugins by running:
```
1
pnpm install rehype-katex remark-math katex
```

Update the Astro configuration to use these plugins:

1
// ...
2
import remarkMath from "remark-math";
3
import rehypeKatex from "rehype-katex";
4

5
export default defineConfig({
6
  // ...
7
  markdown: {
8
    remarkPlugins: [
9
      remarkMath,
10
      [remarkToc, { heading: "(table of contents|შინაარსის ცხრილი)" }],
11
      [remarkCollapse, { test: "(Table of contents|შინაარსის ცხრილი)" }],
12
    ],
13
    rehypePlugins: [rehypeKatex],
14
    shikiConfig: {
15
      // For more themes, visit https://shiki.style/themes
16
      themes: { light: "min-light", dark: "night-owl" },
17
      wrap: false,
18
    },
19
  },
20
  // ...
21
});

Import KaTeX CSS in your post layout file

To ensure KaTeX styles are loaded efficiently only on pages that need them, import the CSS directly into your post layout (e.g., src/layouts/PostDetails.astro). This enables automatic code-splitting and bundling optimization by Astro’s build tool.
```
1
---
2
import { render, type CollectionEntry } from "astro:content";
3
import Layout from "@/layouts/Layout.astro";
4
// ... other imports
5

6
import "katex/dist/katex.min.css";
7

8
export interface Props {
9
  // ...
10
}
11
---
```
This approach is superior to linking external CDN stylesheets because:
- No render-blocking: The CSS is bundled with your page JavaScript, not fetched separately
- Code-splitting: CSS is only loaded on pages that actually use math equations
- Automatic optimization: Astro minifies and optimizes the CSS automatically
- Offline support: No external CDN dependency—everything is self-hosted

As the last step, add a text-color for katex in typography.css.

1
@plugin "@tailwindcss/typography";
2

3
@layer base {
4
  /* other classes */
5

6
  /* Katex text color */
7
  .prose .katex-display {
8
    @apply text-foreground;
9
  }
10

11
  /* ===== Code Blocks & Syntax Highlighting ===== */
12
  /* other classes */
13
}

And voilà, this setup allows you to write LaTeX equations in your Markdown files, which will be rendered properly when the site is built. Once you do it, the rest of the document will appear rendered correctly.

Inline Equations

Inline equations are written between single dollar signs $...$ . Here are some examples:

The famous mass-energy equivalence formula: $E = mc^2$
The quadratic formula: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
Euler’s identity: $e^{i\pi} + 1 = 0$

Block Equations

For more complex equations or when you want the equation to be displayed on its own line, use double dollar signs $$...$$:

The Gaussian integral:

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

The definition of the Riemann zeta function:

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

Maxwell’s equations in differential form:

1
$$
2
\begin{aligned}
3
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
4
\nabla \cdot \mathbf{B} &= 0 \\
5
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
6
\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
7
\end{aligned}
8
$$

Using Mathematical Symbols

LaTeX provides a wide range of mathematical symbols:

Greek letters: $\alpha$ , $\beta$ , $\gamma$ , $\delta$ , $\epsilon$ , $\pi$
Operators: $\sum$ , $\prod$ , $\int$ , $\partial$ , $\nabla$
Relations: $\leq$ , $\geq$ , $\approx$ , $\sim$ , $\propto$
Logical symbols: $\forall$ , $\exists$ , $\neg$ , $\wedge$ , $\vee$