Support math syntax (latex/katex/etc)

I would like to have math in markdown, for this reason I’m using the configurations reported at the bottom.

Nevertheless math is not rendering in markdown neither enclosed in $ (or double $$), nor explicitly annotated in html, e.g.:

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

<div class="math math-display">
  L = \frac{1}{2} \rho v^2 S C_L
</div>

it is rendered literally, without any transformation.

Is this related to #206? Will it be solved, sooner or later? (otherwise I have to consider dropping mdsvex)

---

// mdsvex.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  extensions: [".svx", ".md"],
  remarkPlugins: [
    remarkMath,
  ],
  rehypePlugins: [
    rehypeKatex,
  ],
};

// svelte.config.js
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from "./mdsvex.config.js";

const config = {
  preprocess: [
    mdsvex(mdsvexConfig),
    preprocess()
  ],

  extensions: ['.svelte', '.md', '.svx'],

  kit: {
    adapter: adapter(),
    target: '#svelte'
  }
};

export default config;

[pngwn]

Maybe I’ll sort something out one day 😄

Glad this is all working for you

I think I’ll keep this open but I’ll change the title to be about supporting math syntax, it will help me to track it for v1.

[kwshi]

Hi y’all, just wanted to plug a package I wrote to deal with these issues while trying to use mdsvex for my own website: https://github.com/kwshi/rehype-katex-svelte

It’s essentially a drop-in replacement for rehype-katex, so it allows $ and $$ syntax, but it resolves the issue of Svelte choking on curly-braces by wrapping things in an {@html "..."} node. Would appreciate it if you try it out and let me know if it helps!