---

Welcome to mdsvex math SvelteKit starter

Consider mathsvex if mdsvex does not work for you

Static math

With this skeleton setup we can render math with markup almost exactly like $\LaTeX$.

Demo

The quadratic equation $ax^2+bx+c=0$ has roots

Source code (in mdsvex markdown)

The quadratic equation $ax^2+bx+c=0$ has roots

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

---

Clone this project

degit is the fastest way to clone this project.

npx degit https://github.com/kelvinsjk/mathlified/sites/mdsvex-math-starter myProject
cd myProject
npm i
npm run dev

Alternatively, instructions to set things up yourself can be found on the README

Recreating this starter yourself

You can also recreate this starter yourself, either because the packages are out of date in the repo, or if you have different options (Typescript, ESLint, Prettier, etc) in mind.

Create SvelteKit app with mdsvex

Use the Svelte CLI to easily set up a SvelteKit app with your own options (e.g. with or without Typescript, ESLint, Prettier, etc). Make sure you include mdsvex!

# run the Svelte CLI and follow the prompts
npx sv create
# enter and install the plugins
cd myProject
npm i -D remark-math@3
npm i -D rehype-katex-svelte

Add plugins to mdsvex config

Add the following into your svelte.config.js file.

// svelte.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex-svelte';
export default {
	preprocess: [
		mdsvex({
			extensions: ['.md', '.svx'],
			remarkPlugins: [remarkMath],
			rehypePlugins: [rehypeKatex]
		})
	]
};

Add stylesheets

Refer to the KaTeX Documentation for more details, or add the following into the head element.

<!--in the head element of app.html-->
<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
	integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP"
	crossorigin="anonymous"
/>

If using mathlifier, then we should add the ‘Temml.woff2’ font and the temml stylesheet for best performance.

<!--in the head element of app.html-->
<link
	rel="stylesheet"
	href=" https://cdn.jsdelivr.net/npm/temml@0.11.6/dist/Temml-Local.min.css "
/>

Start developing

npm run dev