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 be Riemann integrable. Let be . Then is continuous, and at all such that is continuous at , is differentiable at with .
Blocks
For equation block or display mode, use line breaks and $$
:
$$
I = \int_0^{2\pi} \sin(x) dx
$$
Configuration
To enable KaTeX, you need to install remark-math
and rehype-katex
plugins.
- npm
- Yarn
npm install --save remark-math@3 rehype-katex@4 hast-util-is-element@1.1.0
yarn add remark-math@3 rehype-katex@4 hast-util-is-element@1.1.0
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/katex@0.13.11/dist/katex.min.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/katex@0.13.11/dist/katex.min.css',
integrity:
'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
crossorigin: 'anonymous',
},
],
};