Import Markdown files as Svelte components.
Add the extension and support for .md
files as part of your svelte.config.js
.
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
// Import the preprocessor.
import { svelteMarkdown } from 'svelte-markdown';
const config = {
// Add support `.md` files.
extensions: ['.svelte', '.md'],
// Add the preprocessor.
preprocess: [vitePreprocess(), svelteMarkdown()],
kit: {
adapter: adapter(),
},
};
export default config;
Components will be rendered with a class
prop that can be passed in as well as metadata
from the YAML frontmatter.
<script context="module">
export const metadata = { title: 'A Frontmatter Title' };
</script>
<script>
let className = '';
export { className as class };
</script>
<div data-markdown class="{className}">
<h1>Heading</h1>
<p>Some content</p>
</div>