docusaurus/website/versioned_docs/version-3.6.3/guides/markdown-features/markdown-features-math-equations.mdx

---
id: math-equations
description: Writing LaTeX Math Equations
slug: /markdown-features/math-equations
---

# Math Equations

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

Mathematical equations can be rendered using [KaTeX](https://katex.org).

## Usage {#usage}

Please read [KaTeX](https://katex.org) documentation for more details.

### Inline {#inline}

Write inline math equations by wrapping LaTeX equations between `$`:

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

<BrowserWindow>

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

</BrowserWindow>

### Blocks {#blocks}

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

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

<BrowserWindow>

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

</BrowserWindow>

## Enabling math equations {#configuration}

Enable KaTeX:

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

    ```bash npm2yarn
    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**](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). We recommended to use an [**ES Modules**](https://flaviocopes.com/es-modules/) config file:

    ```js title="ES module docusaurus.config.js"
    // 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
            },
          },
        ],
      ],
    };
    ```

        <details>

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

            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:

    ```js title="CommonJS module docusaurus.config.js"
    // 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
              },
            },
          ],
        ],
      };
    };
    ```

        </details>

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

    ```js
    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',
        },
      ],
    };
    ```

<details>
<summary>See a config file example</summary>

```js title="docusaurus.config.js"
// 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/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
  // highlight-end
};
```

</details>

## Self-hosting KaTeX assets {#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](https://github.com/KaTeX/KaTeX/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`).

```js title="docusaurus.config.js"
export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};
```