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\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 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
- pnpm
npm install --save remark-math@5 rehype-katex@6
yarn add remark-math@5 rehype-katex@6
pnpm add remark-math@5 rehype-katex@6
Make sure to use remark-math >= 5
and rehype-katex >= 6
for Docusaurus v3 (using MDX v2).
Those 2 plugins are now only available as ESM packages, and you will need to import them dynamically.
First, turn your site config into an async config creator function:
module.exports = async function createConfigAsync() {
return {
// your site config...
};
};
It is now possible to import the plugins dynamically and add them to your content plugin or preset options (usually @docusaurus/preset-classic
docs options):
remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],
Include the KaTeX CSS in your config under stylesheets
:
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',
},
],
Overall the changes look like:
module.exports = async function createConfigAsync() {
return {
title: 'Docusaurus',
tagline: 'Build optimized websites quickly, focus on your content',
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).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',
},
],
};
};
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
).
module.exports = {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};