Skip to main content
Version: 2.0.0-beta.1 🚧

# 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 install
##### 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/[email protected]/dist/katex.min.css",
type: "text/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/[email protected]/dist/katex.min.css',
+ type: 'text/css',
+ integrity:
+ 'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
+ crossorigin: 'anonymous',
+ },
+ ],
};
Last updated on by Pranab Das