Math Equations

CodeHarborHub documentation supports mathematical equations using KaTeX. KaTeX allows you to write LaTeX-style math directly inside Markdown files for clean, professional rendering.

See configuration to enable this feature.

Usage

Please read the KaTeX documentation for detailed syntax. Below are the most common use-cases.

Inline Equations

For inline math, wrap the LaTeX expression in single dollar signs:

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 where $f$ is continuous, $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 where $f$ is continuous, $F'(x)=f(x)$.

Block Equations

For display-mode equations, use double dollar signs on separate lines:

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

http://localhost:3000

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

Enabling Math Equations

To render equations, install and configure the required plugins.

1. Install Plugins

Use the latest KaTeX-compatible versions:

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

warning

For Docusaurus v3 (MDX v3), use remark-math@6 and rehype-katex@7. Other versions may not work properly.

2. Configure docusaurus.config.js

These plugins are ES Modules only, so we recommend using an ESM config file:

docusaurus.config.js (ESM)

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

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
};

Using CommonJS?

You can dynamically import ES modules with an async config:

docusaurus.config.js (CommonJS)

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. Add KaTeX Stylesheet

Include the KaTeX CSS for proper rendering:

docusaurus.config.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',
    },
  ],
};

Complete Example

docusaurus.config.js

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

export default {
  title: 'CodeHarborHub',
  tagline: 'Empowering Developers to Learn & Build',
  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

For maximum control or offline support, you can self-host KaTeX:

1. Download the latest KaTeX release.
2. Copy katex.min.css and the required fonts (usually .woff2 is sufficient) into your site’s static directory.
3. Update the stylesheet path in docusaurus.config.js:

docusaurus.config.js

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