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 will look 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://docs.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/master/',
          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:

Run tar xvzf katex.tar.gz. You can remove the .tar.gz file with rm katex.tar.gz
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.