Setting up Sveltekit with Mdsvex

I've been enjoying my time with Svelte that I've decided I'm going to rebuild my blog agian using SvelteKit and Mdsvex. I want this setup because I have some grand ambition (but high likelihood I'll never find the time to do it) to build interactive tutorials or pages.

Setting this up was pretty simple.

Start by installing a new SvelteKit project

npm init svelte@next new-blog
cd new-blog
npm install

We also need mdsvex.

npm i --save-dev mdsvex

Now that we have the two main parts, lets configure the project so that they work together. Edit the svelte.config.js, and add mdsvex to the Svelte preprocess. We will also add the the extension .svx to be processed.

import {mdsvex} from 'mdsvex';

const config = {
    extensions: ['.svelte', '.md', '.svx'],
    preprocess: [
        mdsvex({
            extensions: ['.md', '.svx'],
        })
    ],
    kit: {
        ...
    }
};

That's pretty much it!

Create the folder routes\posts and create a new md or svx file, for example, new-post.md. Inside this .md file you can write markdown as usual, but also import Svelte components.

// Example markdown file
<script>
  import Header from '../../components/posts/Header.svelte'
</script>

<Header title="Title of this post"></Header>

## Other typical markdown text

Resources

SvelteKit
mdsvex

Comments

[Michael Amachree]

A quick addition: in 2024, you'll need to have a route and a +page.svx for you to render. Like if you need a post route, you'll need a /post folder with a +page.svx for it to render and everything else can be imported into that.