Math Equations

Mathematical equations can be rendered using KaTeX.

Usage

Please read KaTeX documentation for more details.

Inline

Write inline math equations by wrapping LaTeX equations between $:

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)$.

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)$.

Blocks

For equation block or display mode, use line breaks and $$:

$$
I = \int_0^{2\pi} \sin(x) dx
$$

$$I = \int_0^{2\pi} \sin(x) dx$$

Configuration

To enable KaTeX, you need to install remark-math and rehype-katex plugins.

npm

npm install --save remark-math@3 rehype-katex@4 hast-util-is-element@1.1.0

Yarn

yarn add remark-math@3 rehype-katex@4 hast-util-is-element@1.1.0

caution

Use the exact same versions. The latest versions are incompatible with Docusaurus 2.

Import the plugins in docusaurus.config.js:

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

Add them to your content plugin or preset options (usually @docusaurus/preset-classic docs options):

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

Include the KaTeX CSS in your config under stylesheets:

stylesheets: [
    {
        href: "https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css",
        integrity: "sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc",
        crossorigin: "anonymous",
    },
],

Overall the changes look like:

docusaurus.config.js

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

module.exports = {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [math],
          rehypePlugins: [katex],
        },
      },
    ],
  ],
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css',
      integrity:
        'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
      crossorigin: 'anonymous',
    },
  ],
};