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
Top comments (0)