mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 18:58:36 +02:00
129 lines
2.8 KiB
Text
129 lines
2.8 KiB
Text
---
|
|
id: math-equations
|
|
title: Math Equations
|
|
description: Writing LaTeX Math Equations
|
|
slug: /markdown-features/math-equations
|
|
---
|
|
|
|
import BrowserWindow from '@site/src/components/BrowserWindow';
|
|
|
|
Mathematical equations can be rendered using [KaTeX](https://katex.org).
|
|
|
|
## Usage
|
|
|
|
Please read [KaTeX](https://katex.org) documentation for more details.
|
|
|
|
### Inline
|
|
|
|
Write inline math equations by wrapping LaTeX equations between `$`:
|
|
|
|
```mdx
|
|
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)$.
|
|
```
|
|
|
|
<BrowserWindow>
|
|
|
|
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)$.
|
|
|
|
</BrowserWindow>
|
|
|
|
### Blocks
|
|
|
|
For equation block or display mode, use line breaks and `$$`:
|
|
|
|
```mdx
|
|
$$
|
|
I = \int_0^{2\pi} \sin(x) dx
|
|
$$
|
|
```
|
|
|
|
<BrowserWindow>
|
|
|
|
$$
|
|
I = \int_0^{2\pi} \sin(x) dx
|
|
$$
|
|
|
|
</BrowserWindow>
|
|
|
|
## Configuration
|
|
|
|
To enable KaTeX, you need to install `remark-math` and `rehype-katex` plugins.
|
|
|
|
```bash npm2yarn
|
|
npm install --save remark-math@3 rehype-katex@5 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`:
|
|
|
|
```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):
|
|
|
|
```js
|
|
remarkPlugins: [math],
|
|
rehypePlugins: [katex],
|
|
```
|
|
|
|
Include the KaTeX CSS in your config under `stylesheets`:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js title="docusaurus.config.js"
|
|
// highlight-start
|
|
const math = require('remark-math');
|
|
const katex = require('rehype-katex');
|
|
// highlight-end
|
|
|
|
module.exports = {
|
|
title: 'Docusaurus',
|
|
tagline: 'Build optimized websites quickly, focus on your content',
|
|
presets: [
|
|
[
|
|
'@docusaurus/preset-classic',
|
|
{
|
|
docs: {
|
|
path: 'docs',
|
|
// highlight-start
|
|
remarkPlugins: [math],
|
|
rehypePlugins: [katex],
|
|
// 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
|
|
};
|
|
```
|