KaTeX + Astro

Beautiful math on static sites

A complete reference for publishing mathematical notation on the web. KaTeX renders LaTeX at build time with no client-side JavaScript — fast, accessible, and beautiful.

eiπ+1=0e^{i\pi} + 1 = 0

View formula gallery Markdown comparison Sample blog post

Quick start

Setup in four steps

  1. Install dependencies 
    npm install katex remark-math rehype-katex
  2. Configure Astro Markdown plugins in astro.config.mjs: 
    import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
});
  3. Load KaTeX styles — use MathLayout.astro or add KatexHead.astro to your layout: 
    ---
import KatexHead from '../components/math/KatexHead.astro';
---
<KatexHead slot="head" />
  4. Write math in Markdown with $...$ for inline and $$...$$ for display math, or use the <Math /> component in .astro files.

Included components

Ready-to-use KaTeX building blocks

MathLayout.astro

Page layout with KaTeX CSS and section navigation. Use for any math page or blog template.

Math.astro

Renders arbitrary LaTeX at build time. Pass tex and optional display prop.

φ=1+52\varphi = \frac{1 + \sqrt{5}}{2}

MathComparison.astro

Side-by-side source and rendered output — ideal for tutorials showing Markdown syntax next to the final math.

KatexHead.astro

Minimal head fragment that imports KaTeX styles. Drop into any existing layout.

On this site

Explore the demo

This section lives at airomatic.ai/math as part of the main Airomatic site. Browse the formula gallery, the Markdown comparison, or read The Beauty of Mathematics.