Astro: Getting your math right

When I decided to start blogging about my AI/ML journey the first question was what framework to use. Which, with a little bit of research I decided on Astro. The immediate next question that came in while I was still writng my first few AI/AL related pieces was, how do I present math formulas in a formatted way. I looked around and couldn’t find all the information at a same place, so decided to put it all together. So if you want to your math formulas to not look like

E=mc2

but, look like this instead

E=m.c2E = m.c^2

here is what you need to do.

Step 1: Install the necessary packages

To get the environment ready, install two packages remark-math and rehype-katex. In your terminal run the following command:

$ npm install remark-math rehype-katex

remark-math This package adds support for math syntax.

rehype-katex This package handles the rendering of math expressions in Markdown files. It renders math with KaTeX at compile time, which means that there is no client side JavaScript needed.

Step 2: Update Astro config file

Next, modify the Astro config file astro.config.mjs under the root folder of the project to import and enable these packages.

Locate and copy below lines after the other imports

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

Add lines to the markdown section of defineConfig function as shown below:

export default defineConfig({
	


	markdown: {
		remarkPlugins: [remarkMath],
		rehypePlugins: [
			[
				rehypeKatex,
				{
					// Katex plugin options
				}
			]
		]
	}
})

Step 3: Enable auto-rendering capability

To enable math rendering capability across all pages add the auto-render extension of KaTeX in the <head> tag of the Astro layout file for Markdown pages base.astro. Copy the following lines:

<link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" 
    integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" 
    crossorigin="anonymous">
<script defer 
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" 
    integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" 
    crossorigin="anonymous">
</script>
<script defer 
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" 
    integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" 
    crossorigin="anonymous"
    onload="renderMathInElement(document.body);">
</script>

Above, the defer attribute indicates that the script doesn’t need to execute until the page has loaded, speeding up page rendering; and the onload attribute calls renderMathInElement once the auto-render script loads.

Step 4: Add Math to your markdown content

Write your Math expression starting and ending in two dollar signs ($$) and format it using using KaTex supported functions and see then coming alive. For example copy the below code to your markdown file.

$$ E = m.c^2 $$

and it should appear something like this in you html page.

E=m.c2E = m.c^2

And that should be all.