rehype-katex-svelte

rehype plugin to transform .math-inline and .math-display elements with KaTeX into Svelte-friendly markup nodes.

This plugin is functionally equivalent to rehype-katex but is specifically intended to be used with mdsvex (markdown format for Svelte).

The key issue it addresses is that LaTeX curly braces (e.g. {x}) conflict with Svelte's template syntax; as such, using rehype-katex to serialize a LaTeX expression such as \frac{x}{y} would result in "x is not defined" and "y is not defined" errors. This plugin fixes those errors by rendering KaTeX content via {@html "..."} instead of plain HTML nodes (which is what rehype-katex does), preventing curly-brace content from getting treated as Svelte template expressions.

Usage

To use rehype-katex-svelte with mdsvex, you need to import rehype-katex-svelte and remark-math and add both to mdsvex's config:

Note: mdsvex uses an old remark version so you need remark-math@3.0.0

1npm install -D remark-math@3.0.0

1import rehypeKatexSvelte from "rehype-katex-svelte";
2import remarkMath from 'remark-math'
3
4mdsvex({
5  remarkPlugins: [
6    remarkMath,
7  ],
8  rehypePlugins: [
9    rehypeKatexSvelte,
10    /* other rehype plugins... */
11  ],
12  /* other mdsvex config options... */
13});

Options passed to the rehype-katex-svelte plugin are relayed directly to KaTeX:

1mdsvex({
2  rehypePlugins: [
3    [
4      rehypeKatexSvelte,
5      {
6        macros: {
7          "\\CC": "\\mathbb{C}",
8          "\\vec": "\\mathbf",
9        },
10      },
11    ],
12    /* etc. */
13  ],
14  /* etc. */
15});

Then you start writing maths in your .svx files

1<!-- blog-post.svx -->
2<!-- inline -->
3$f(x) = x^2$
4<!-- block -->
5$$
6f(x) = x^2
7$$

You might also want to add katex.css somewhere to style the maths properly

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">

This plugin is not really intended to be used directly with the rehype API, but nothing stops you from doing so if that's what gets you going:

1rehype().use(rehypeKatexSvelte[, katexOptions])

Caveats

• I didn't bother implementing some of rehype-katex's other features, e.g. options.throwOnError, because I didn't personally find a need for it.

• My code might not be following rehype "best practices"—this is literally my first attempt at a rehype plugin. If you'd like to help me improve my code, by all means go ahead! (Please open a PR.)

Security

I haven't given any thought to sanitizing inputs & protecting against XSS, so beware! Make sure you only use rehype-katex-svelte on inputs you trust, i.e. your own source code.

If you care about improving the security of this plugin, please open a PR, and I'd be happy to merge it!

Contributing

Feel free to open an issue, make a PR, email me, whatever. Code of conduct: don't be a jerk.

License

GPLv3 @ Kye Shi