Skip to content

docs: Document configuration of the remark-math plugin #10967

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
waldyrious wants to merge 1 commit into from
Closed

docs: Document configuration of the remark-math plugin #10967

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 46 additions & 1 deletion website/docs/guides/markdown-features/markdown-features-math-equations.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ Enable KaTeX:
import rehypeKatex from 'rehype-katex';
// highlight-end

// highlight-start
export default {
presets: [
[
Expand Down Expand Up @@ -188,6 +187,52 @@ export default {

</details>

## Using double dollar signs as delimiters

In some cases (e.g. prose that includes prices in dollars), it may be undesirable to treat any pair of single dollar signs occurring in the same line as delimiters of math syntax. To configure the plugin to only recognize double dollar signs as delimiters of inline math, set the option set the [`singleDollarTextMath` configuration option]() to `false`:

```js title="docusaurus.config.js"
export default {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
// highlight-start
remarkPlugins: [[remarkMath, {singleDollarTextMath: false}]],
// highlight-end
rehypePlugins: [rehypeKatex],
},
},
],
],
};
```

This will allow writing markdown like:

```latex
The item costs $300 but is available at a discounted rate of $290.
The absolute difference is $$\$300 - \$290 = \$10$$, and the relative difference, as a percentage, is given by:

$$$
\left(1 - \frac{290}{300} \right) \times 100 \approx 3.33 \%
$$$
```

with the results being:

<BrowserWindow>

The item costs \$300 but is available at a discounted rate of \$290. The absolute difference is $$\$300 - \$290 = \$10$$, and the relative difference, as a percentage, is given by:

$$
\left(1 - \frac{290}{300} \right) \times 100 \approx 3.33 \%
$$

</BrowserWindow>

## Self-hosting KaTeX assets {#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](https://github.com/KaTeX/KaTeX/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`).
Expand Down