mirror of
https://github.com/mdx-js/mdx.git
synced 2024-11-09 23:39:11 +03:00
102 lines
3.0 KiB
Plaintext
102 lines
3.0 KiB
Plaintext
import {Note} from '../_component/note.jsx'
|
|
|
|
export const info = {
|
|
author: [
|
|
{github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
|
|
],
|
|
modified: new Date('2023-10-23'),
|
|
published: new Date('2021-10-06')
|
|
}
|
|
export const navSortSelf = 3
|
|
|
|
# Math
|
|
|
|
This guide explores how to support math (LaTeX) in MDX. {/* more */}
|
|
MDX supports standard markdown syntax ([CommonMark][]).
|
|
That means math is not supported by default.
|
|
Math can be enabled by using a remark plugin: [`remark-math`][remark-math],
|
|
combined with a rehype plugin: either
|
|
[`rehype-katex`][rehype-katex] (KaTeX) or [`rehype-mathjax`][rehype-mathjax]
|
|
(MathJax).
|
|
Like other remark and rehype plugins, they can be passed in [`remarkPlugins`
|
|
and `rehypePlugins`, respectively, in `ProcessorOptions`][processor-options].
|
|
More info on plugins is available in [§ Extending MDX][extend]
|
|
|
|
Say we have an MDX file like this:
|
|
|
|
```mdx path="example.mdx"
|
|
# $$\sqrt{a^2 + b^2}$$
|
|
```
|
|
|
|
The above MDX with math can be transformed with the following module:
|
|
|
|
```tsx path="example.js"
|
|
import fs from 'node:fs/promises'
|
|
import {compile} from '@mdx-js/mdx'
|
|
import rehypeKatex from 'rehype-katex'
|
|
import remarkMath from 'remark-math'
|
|
|
|
console.log(
|
|
String(
|
|
await compile(await fs.readFile('example.mdx'), {
|
|
rehypePlugins: [rehypeKatex],
|
|
remarkPlugins: [remarkMath]
|
|
})
|
|
)
|
|
)
|
|
```
|
|
|
|
<details>
|
|
<summary>Expand equivalent JSX</summary>
|
|
|
|
```tsx path="output.jsx"
|
|
<>
|
|
<h1>
|
|
<span className="katex">
|
|
<span className="katex-mathml">
|
|
<math xmlns="http://www.w3.org/1998/Math/MathML">…</math>
|
|
</span>
|
|
<span className="katex-html" aria-hidden="true">
|
|
…
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
</>
|
|
```
|
|
</details>
|
|
|
|
<Note type="important">
|
|
**Important**: if you chose `rehype-katex`, you should also use `katex.css`
|
|
somewhere on the page to style math properly.
|
|
At the time of writing, the last version is:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
|
|
```
|
|
|
|
To get the latest link to the stylesheet, go to [`katex docs`][katex docs].
|
|
|
|
{/* to do: once in a while, get the latest. */}
|
|
</Note>
|
|
|
|
<Note type="info">
|
|
**Note:** see also
|
|
[`remark-mdx-math-enhanced`](https://github.com/goodproblems/remark-mdx-math-enhanced),
|
|
which you can use to support JavaScript expressions inside of math (such as to
|
|
access props or to make calculations)
|
|
</Note>
|
|
|
|
[commonmark]: https://spec.commonmark.org/current/
|
|
|
|
[remark-math]: https://github.com/remarkjs/remark-math/tree/main/packages/remark-math
|
|
|
|
[rehype-katex]: https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex
|
|
|
|
[rehype-mathjax]: https://github.com/remarkjs/remark-math/tree/main/packages/rehype-mathjax
|
|
|
|
[processor-options]: /packages/mdx/#processoroptions
|
|
|
|
[extend]: /docs/extending-mdx/
|
|
|
|
[katex docs]: https://katex.org/docs/browser#loading-as-global
|