mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
6d184a3e3d
* New doc page for math equations * improve math equations doc Co-authored-by: slorber <lorber.sebastien@gmail.com>
119 lines
2.7 KiB
Text
119 lines
2.7 KiB
Text
---
|
|
id: math-equations
|
|
title: Math Equations
|
|
description: Writing LaTeX Math Equations
|
|
slug: /markdown-features/math-equations
|
|
---
|
|
|
|
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)$.
|
|
```
|
|
|
|
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 `$$`:
|
|
|
|
```mdx
|
|
$$
|
|
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.
|
|
|
|
```bash npm2yarn
|
|
npm install --save 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`:
|
|
|
|
```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.11/dist/katex.min.css",
|
|
type: "text/css",
|
|
integrity: "sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc",
|
|
crossorigin: "anonymous",
|
|
},
|
|
],
|
|
```
|
|
|
|
Overall the changes look like:
|
|
|
|
```diff 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.11/dist/katex.min.css',
|
|
+ type: 'text/css',
|
|
+ integrity:
|
|
+ 'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
|
|
+ crossorigin: 'anonymous',
|
|
+ },
|
|
+ ],
|
|
// highlight-end
|
|
};
|
|
```
|