diff --git a/README.md b/README.md index 37e38fb..c85e055 100644 --- a/README.md +++ b/README.md @@ -23,13 +23,21 @@ Svelte template expressions. ## Usage -To use rehype-katex-svelte with mdsvex, import rehype-katex-svelte as you would -any other rehype plugin, and add it to your mdsvex config: +To use rehype-katex-svelte with mdsvex, you need to import rehype-katex-svelte **and** [remark-math](https://github.com/remarkjs/remark-math) and add both to mdsvex's config: + +> **Note:** mdsvex uses an old remark version so you need remark-math@3.0.0 +> ```bash +> npm install -D remark-math@3.0.0 +> ``` ```js import rehypeKatexSvelte from "rehype-katex-svelte"; +import remarkMath from 'remark-math' mdsvex({ + remarkPlugins: [ + remarkMath, + ], rehypePlugins: [ rehypeKatexSvelte, /* other rehype plugins... */ @@ -58,6 +66,24 @@ mdsvex({ }); ``` +Then you start writing maths in your .svx files + +```svelte + + +$f(x) = x^2$ + +$$ +f(x) = x^2 +$$ +``` + +You might also want to add `katex.css` somewhere to style the maths properly + +```html + +``` + > 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: >