Installation

pnpm add -D svelte-in-markdown

Important

This library is built to be used in SvelteKit projects only!

Setup

Import the package and modify the svelte.config.js file:

import {
    SVELTE_EXTENSIONS,
    svelteInMarkdownPreprocess,
} from "svelte-in-markdown"

const config = {
    extensions: SVELTE_EXTENSIONS,
    preprocess: [svelteInMarkdownPreprocess(), vitePreprocess()],
}

Important

Place svelteInMarkdownPreprocess() before vitePreprocess(), Otherwise you will encounter unexpected behaviors!

All done! Create a +page.md file in the src/routes folder and add your content in!

<script>
    import MyComponent from "./MyComponent.svelte"
    import MyMarkdownContent from "./MyMarkdownContent.md"
    
    let count = 0
</script>

# Hello, World

<button on:click={() => count += 1}>
    {count}
</button>

<MyComponent />
<MyMarkdownContent />

More help

Note

Everything is documented using jsDoc/tsDoc. Please take a look at everything that this library exports and all of the available configs and options to have a better understanding of things. Alternatively you can use tsdocs.dev.