How to use LaTeX in Docusaurus with Remark Math and Rehype KaTeX

Installation

You can type LaTeX in Docusaurus by using remark math.

In the root directory of your Docusaurus project, run yarn add remark-math and yarn add rehype-katex. This will add remark-math and rehype-katex to the package.json file.

Configuration

At the top of your docusaurus.config.js, add

const math = require('remark-math');
const katex = require('rehype-katex');

Then, in docusaurus.config.js, add the following in module.exports (not under themeConfig)

  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X',
      crossorigin: 'anonymous',
    },
  ],

Then add the following underneath your docs section in presets:

remarkPlugins: [math],
rehypePlugins: [katex],

The result looks something like this:

const math = require('remark-math')
const katex = require('rehype-katex')
module.exports = {
  title: 'Theo\'s Docs',
  tagline: 'Read my docs',
  url: 'https://theochu.com',
  baseUrl: '/',
  favicon: 'img/Theodore_Chu_Laughing-Square-1000px.png',
  organizationName: 'TheodoreChu', // Usually your GitHub org/user name.
  projectName: 'docs', // Usually your repo name.
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X',
      crossorigin: 'anonymous',
    },
  ],
  themeConfig: {
...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          editUrl:
            'https://github.com/theodorechu/docs/edit/main/',
          routeBasePath: '',
          remarkPlugins: [math],
          rehypePlugins: [katex],
          showLastUpdateTime: true,
          //showLastUpdateAuthor: true,
        },

Self-Hosting the Stylesheets

You can also choose to self-host the stylesheets. The latest versions are available here.

Go to static by running cd static in your root directory.

Then run

wget https://github.com/KaTeX/KaTeX/releases/download/v0.12.0/katex.tar.gz

There's at least two ways to unpack the .tar.gz files:

1. Run tar xvzf katex.tar.gz. You can remove the .tar.gz file with rm katex.tar.gz
2. Run gunzip katex.tar.gz then run tar xvf katex.tar.

Then, in the above configuration steps, replace href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css', with

href: '/katex/katex.min.css',

Usage

You can use either $ brackets or $$ brackets across multiple lines.

For example, this

**Fundamental Theorem of Calculus**  
Let $f:[a,b] \to \R$ be Riemann integrable. Let $F:[a,b]\to\R$ be $F(x)=
\int_{a}^{x}f(t)dt$.
Then $$F$$ is continuous, and at all $x$ such that $f$ is continuous at $x$,
$F$ is differentiable at $x$ with $F'(x)=f(x)$.

will print to this:

Fundamental Theorem of Calculus
Let $f:[a,b] \to \R$ be Riemann integrable. Let $F:[a,b]\to\R$ be $F(x)= \int_{a}^{x}f(t)dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

Troubleshooting

The latest versions of remark-math and remark-katex are v4.0.0. However, remark-math requires remark-parse v9.0.0 or remark v13.0.0, which Docusaurus does not support yet, so you may need to change the versions of remark-math and remark-katex in package.json:

  "rehype-katex": "^4.0.0",
  "remark-math": "^3.0.1",

You can learn more about remark v13 here and track whether Docusaurus supports it here.