Moh Hasbi Assidiqi

Support LaTeX Math in Astro


Astro is a new static site generator that allows you to write your content in markdown and use React components to build your site. It is a great tool for building static sites with modern web technologies. However, one thing that is missing from Astro is support for LaTeX math. In this post, I will show you how to add support for LaTeX math in Astro using KaTeX.

What is KaTeX?

KaTeX is a fast, easy-to-use JavaScript library for rendering LaTeX math in the browser. It is a great alternative to MathJax, which is another popular library for rendering LaTeX math. KaTeX is faster and more lightweight than MathJax, making it a great choice for static sites. It renders the equations using HTML and CSS instead of SVG, which makes it faster and more efficient.

Adding KaTeX to Astro

To add KaTeX to Astro, you need to install the remark-math and rehype-katex plugins. These plugins will parse the LaTeX math in your markdown files and render it using KaTeX. You also need to install the katex renderer. You can install these plugins using npm:

npm install remark-math rehype-katex katex

Next, you need to add the plugins to your Astro config file. Open your astro.config.mjs file and add the following code:

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

export default {
  // Other config options...
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
};

This code tells Astro to use the remark-math and rehype-katex plugins to parse and render LaTeX math in your markdown files. Now you can write LaTeX math in your markdown files and it will be rendered using KaTeX.

Check the Installation

KaTeX requires a stylesheet to render the math equations properly. You need to include the KaTeX stylesheet in your HTML file. You can do this by adding the following code to your head section. The head section is usually located in the astro layout file (ie. src/layouts/_default.astro):

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
    integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
    crossorigin="anonymous">

This code will include the KaTeX stylesheet in your HTML file, allowing KaTeX to render the math equations properly. Make sure to check that the stylesheet is properly loaded in your browser’s developer tools.

You can also use the following code to check if the stylesheet is properly loaded:

<style>
  .katex-version {display: none;}
  .katex-version::after {content:"0.10.2 or earlier";}
</style>
<span class="katex">
  <span class="katex-mathml">The KaTeX stylesheet is not loaded!</span>
  <span class="katex-version rule">KaTeX stylesheet version: </span>
</span>

If the stylesheet is properly loaded, you should see the version number of the KaTeX stylesheet in the output. If you don’t see the version number, make sure to check the URL of the stylesheet and that it is properly loaded.

Here is an example output if the stylesheet is properly loaded:

The KaTeX stylesheet is not loaded! KaTeX stylesheet version:

Using LaTeX Math in Astro

To use LaTeX math in your Astro markdown files, you can enclose your math expressions in dollar signs ($). For example, to render the equation E=mc2E=mc^2, you can write:

$E=mc^2$

The result will be: E=mc2E=mc^2

This will render the equation using KaTeX. You can also use double dollar signs ($$) to display multi-line equation:

$$
\int_{a}^{b} f(x) \, dx
\\[1em\\]
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

The result will be:

∫abf(x) dx∑i=1ni=n(n+1)2\int_{a}^{b} f(x) \, dx \\[1em] \sum_{i=1}^{n} i = \frac{n(n+1)}{2}

This will render the equation on a new line. You can use all the standard LaTeX math commands and symbols in your markdown files, and they will be rendered using KaTeX.

Conclusion

Adding support for LaTeX math in Astro is easy with the remark-math and rehype-katex plugins. These plugins allow you to write LaTeX math in your markdown files and render it using KaTeX. This makes it easy to include math equations and symbols in your static site built with Astro. If you are looking for a fast and lightweight way to render LaTeX math in your static site, give KaTeX a try.

References