Skip to main content

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:

  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]→Rf:[a,b] \to \R be Riemann integrable. Let F:[a,b]→RF:[a,b]\to\R be F(x)=∫axf(t)dtF(x)= \int_{a}^{x}f(t)dt. Then FF is continuous, and at all xx such that ff is continuous at xx, FF is differentiable at xx with F′(x)=f(x)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.