How to Add Math Function Parsing to an MDsveX Sveltekit project

Are you trying to get rehype math function parsing functions in your blog posts with MDsveX and Sveltekit? Here is the easiest way I found to get this in your projects:

x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}

Run npm i -D rehype-katex-svelte remark-math to install the Rehype KaTeX plugins.
1. Make sure that your remark-math node version is ^3.0.0 in package.json. I’ve had trouble with different versions.
Run npm i mathlifier for parsing math functions.
Add this link element to the <head> element of your app.html file:

<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
			integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
			crossorigin="anonymous"
		/>

Update your svelte.config.js file:

import mdsvexConfig from './mdsvex.config.js';

const config = {
	extensions: ['.svelte', ...mdsvexConfig.extensions],
	preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],
...}

Create an mdsvex.config.js next to your svelte.config.js file:

import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex-svelte';

const config = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],

	smartypants: {
		dashes: 'oldschool'
	},

	remarkPlugins: [remarkMath],
	rehypePlugins: [rehypeKatex]
});

export default config;

And that’s all to get math functions in your .md files in your MdsVex Sveltekit project. This was made with the help of this post andthis GitHub repo.