Skip to content
Go back

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.

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

Free Close-up of complex equations on a chalkboard, showcasing chemistry and math symbols. Stock Photo
Photo by Vitaly Gariev

Instructions

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

  1. Install the necessary remark and rehype plugins by running:

    pnpm install rehype-katex remark-math katex
    bash
  2. Update the Astro configuration to use the these plugins:

    // ...
    import remarkMath from "remark-math";
    import rehypeKatex from "rehype-katex";
    ts

export default defineConfig({ // … markdown: { remarkPlugins: [ remarkMath, // [!code ++] ], rehypePlugins: [rehypeKatex], // [!code ++] shikiConfig: { // For more themes, visit https://shiki.style/themes themes: { light: “min-light”, dark: “night-owl” }, wrap: false, }, }, // … });

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

    @plugin "@tailwindcss/typography";
    
    @layer base {
      /* other classes */
    
      /* Katex text color */
      .prose .katex-display {
        @apply text-foreground;
      }
    
      /* ===== Code Blocks & Syntax Highlighting ===== */
      /* other classes */
    }
    css

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:

  1. The famous mass-energy equivalence formula: $E = mc^2$
  2. The quadratic formula: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
  3. 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:

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

The definition of the Riemann zeta function:

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

Maxwell’s equations in differential form:

$$
\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}
$$
bash

Using Mathematical Symbols

LaTeX provides a wide range of mathematical symbols:



Previous Post
Rust Getting Started Guide: Why Choose Rust?

评论区

文明评论,共建和谐社区