DEV Community

Richard Lee
Richard Lee

Posted on

Setting up Sveltekit with Mdsvex

#svelte #javascript

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
Enter fullscreen mode Exit fullscreen mode

We also need mdsvex.

npm i --save-dev mdsvex
Enter fullscreen mode Exit fullscreen mode

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: {
        ...
    }
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Resources

SvelteKit
mdsvex

Top comments (1)

Collapse
 
dev_michael profile image
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.