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.

Last updated on