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\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[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)$.

http://localhost:3000

Let $f\colon[a,b] \to \R$ be Riemann integrable. Let $F\colon[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
$$

http://localhost:3000

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

Enabling math equations

Enable KaTeX:

1. Install the remark-math and rehype-katex plugins:

   npm

   npm install --save remark-math@6 rehype-katex@7

   Yarn

   yarn add remark-math@6 rehype-katex@7

   pnpm

   pnpm add remark-math@6 rehype-katex@7

   Bun

   bun add remark-math@6 rehype-katex@7

   warning

   Make sure to use remark-math 6 and rehype-katex 7 for Docusaurus v3 (using MDX v3). We can't guarantee other versions will work.

2. These 2 plugins are only available as ES Modules. We recommended to use an ES Modules config file:

   ES module docusaurus.config.js

   import remarkMath from 'remark-math';
   import rehypeKatex from 'rehype-katex';
   
   export default {
     presets: [
       [
         '@docusaurus/preset-classic',
         {
           docs: {
             path: 'docs',
             remarkPlugins: [remarkMath],
             rehypePlugins: [rehypeKatex],
           },
         },
       ],
     ],
   };

   Using a CommonJS config file?

   If you decide to use a CommonJS config file, it is possible to load those ES module plugins thanks to dynamic imports and an async config creator function:

   CommonJS module docusaurus.config.js

   module.exports = async function createConfigAsync() {
     return {
       presets: [
         [
           '@docusaurus/preset-classic',
           {
             docs: {
               path: 'docs',
               remarkPlugins: [(await import('remark-math')).default],
               rehypePlugins: [(await import('rehype-katex')).default],
             },
           },
         ],
       ],
     };
   };

3. Include the KaTeX CSS in your config under stylesheets:

   export default {
     //...
     stylesheets: [
       {
         href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
         type: 'text/css',
         integrity:
           'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
         crossorigin: 'anonymous',
       },
     ],
   };

See a config file example

docusaurus.config.js

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

Self-hosting KaTeX assets

Loading stylesheets, fonts, and JavaScript libraries from CDN sources is a good practice for popular libraries and assets, since it reduces the amount of assets you have to host. In case you prefer to self-host the katex.min.css (along with required KaTeX fonts), you can download the latest version from KaTeX GitHub releases, extract and copy katex.min.css and fonts directory (only .woff2 font types should be enough) to your site's static directory, and in docusaurus.config.js, replace the stylesheet's href from the CDN URL to your local path (say, /katex/katex.min.css).

docusaurus.config.js

export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};

You can use the third-party @tats-u/docusaurus-plugin-copy-katex-assets plugin to copy the katex.min.css and fonts directory to your site's assets directory.

MathML or Temml instead of KaTeX

You can use the @daiji256/rehype-mathml plugin instead of rehype-katex:

• When you want to use another math font other than Latin Modern Math
• When you want to reduce the download size to a minimum by compromising with local fonts
• When you want to reduce the number of files to be served
• When you want to use $LaTeX$ syntax available not in KaTeX but in Temml

After installing and activating the plugin, put Temml assets in your site's static directory, and replace the stylesheet's href from the CDN URL of katex.min.css to your local path of the Temml CSS (say, /temml/temml.min.css) in docusaurus.config.js.

You can use the third-party @tats-u/docusaurus-plugin-copy-temml-assets plugin to copy the Temml assets to your site's assets directory.

note

Temml recommends the Latin Modern font for better display, but its WOFF2 font file is larger than the entire KaTeX font bundle. Unless you prefer fonts other than Latin Modern (e.g. local fonts or Noto Sans Math) or the compliance to the standards, or need the support of TeX features supported only by Temml, KaTeX is the better choice.