Math Equations

import BrowserWindow from '@site/src/components/BrowserWindow';

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

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 <code>```math</code> fenced code blocks.

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

You can also use line breaks and $$, although this syntax relies on a Markdown syntax extension and is less portable:

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

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

Enabling math equations

Enable KaTeX:

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

   bashCopy

   npm install --save 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:

   jsCopy

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

   Copy

   <details>
   

   <summary> Using a [**CommonJS**](https://nodejs.org/api/modules.html#modules-commonjs-modules) config file? </summary>
   Copy

       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:
   

   jsCopy

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

   Copy

   </details>
   

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

   jsCopy

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

// highlight-start
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
// highlight-end

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

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

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