How to add LaTeX Equations in Astro blog posts

Learn how to add LaTeX equations in Astro blog posts using Markdown, KaTeX, and remark/rehype plugins.

Open Table of contents

Introduction
Prerequisites
Installation
Configuration
- 1. Update Astro Config
- 2. Import KaTeX CSS
Usage
Conclusion

Introduction

LaTeX equations are essential for technical and scientific blog posts. This guide shows you how to integrate LaTeX math rendering into your AstroPaper blog using KaTeX and remark/rehype plugins.

Prerequisites

Before we begin, make sure you have:

An existing AstroPaper project
Node.js installed
Basic knowledge of Markdown

Installation

First, install the necessary packages:

npm install remark-math rehype-katex

Configuration

1. Update Astro Config

Add the remark and rehype plugins to your astro.config.ts:

import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default defineConfig({
  // ...
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
});

2. Import KaTeX CSS

Import the KaTeX CSS in your main layout file to properly render the equations:

<!-- src/layouts/Layout.astro -->
<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
    integrity="sha384-n8MVd4RsNIU0tQ2/19rlSTn7pE+q6lDqv0MY0zHitGOXaXQ50gRKu1YFr/6mmEqx"
    crossorigin="anonymous"
  />
</head>

Usage

Inline Equations

Use single dollar signs for inline math: $E = mc^2$ renders as inline math.

Block Equations

Use double dollar signs for display math:

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Common Examples

Summation:

$$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$

Integral:

$$\int_{a}^{b} f(x) \, dx$$

Matrix:

$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

Conclusion

With these steps, you can easily add beautiful LaTeX equations to your AstroPaper blog posts. The combination of remark-math and rehype-katex provides a seamless experience for writing mathematical content in Markdown.