LaTeX Math Rendering in a Static Site

If you write about engineering, physics, or anything quantitative, plain text formulas get awkward fast.

Math rendering lets you write expressions in Markdown using LaTeX syntax while still keeping the source content portable and easy to edit.

Part of why I keep notes like this on the blog is simple: I write things down so I can remember them later. This is one of those small setup details that is easy to forget until the next time I need to write an equation in a post.

The basic idea

There are two parts required here:

1. a Markdown plugin that understands math syntax
2. a renderer or CSS layer that turns it into polished output

In Astro, a solid setup is:

• remark-math for parsing math in Markdown
• rehype-katex for rendering it
• KaTeX CSS for the final appearance

Install those pieces with:

npm install remark-math rehype-katex katex

Astro configuration

This site uses the following Markdown configuration:

import { defineConfig } from 'astro/config';
import rehypeKatex from 'rehype-katex';
import remarkMath from 'remark-math';

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

Then KaTeX styles are loaded in the shared layout so formulas render correctly on the page.

For this site, that import lives in src/layouts/BaseLayout.astro:

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

Inline math: source and output

In markdown, you write inline math like this:

Power is written as $P = V \cdot I$.

It renders like this:

Power is written as $P = V \cdot I$.

That keeps formulas close to the sentence where they matter.

For this setup, $...$ is the inline syntax to use. I avoid \(...\) here because this Astro and remark-math configuration is already set up around dollar-delimited inline math.

Display math: source and output

For larger formulas, block math is easier to read.

In markdown, you write block math like this:

$$
P = V \cdot I
$$

It renders like this:

For scalar engineering equations, \cdot makes multiplication easier to read than placing variables directly next to each other. In linear algebra, though, expressions like \mathbf{A}\mathbf{x} are still conventional, so I leave those as implicit multiplication.

A more advanced example: linear algebra

Here is what the Markdown source looks like:

$$
\mathbf{A} =
\begin{bmatrix}
1 & 2 \\
0 & 3
\end{bmatrix},
\qquad
\mathbf{x} =
\begin{bmatrix}
x_1 \\
x_2
\end{bmatrix},
\qquad
\mathbf{A}\mathbf{x} = \lambda \mathbf{x}
$$

And here is what it renders to:

You can also write a compact least-squares expression:

$$
\hat{\mathbf{x}} = \left(\mathbf{A}^\mathsf{T}\mathbf{A}\right)^{-1}\mathbf{A}^\mathsf{T}\mathbf{b}
$$

Rendered output:

This is the kind of notation that gets ugly very quickly in plain text, which is why math rendering is worth setting up.

A few simpler examples

For energy over time:

If current and voltage are approximately constant over time:

and substituting power gives:

For a resistor relationship:

And for Joule heating:

Why this matters

Math support is most useful when you want posts to stay:

• readable in source form
• precise in published form
• easy to revise later

That makes Markdown a much better fit for technical writing than screenshots of equations or hand-formatted text approximations.