Vite Plugin Svelte Md

Markdown with Svelte for Vite

vite-plugin-svelte-md

Markdown with Svelte for Vite

vite-plugin-svelte-md is heavily inspired by vite-plugin-md package.

📛 Features

This plugin converts markdown files to Svelte component templates.
Combined with the Svelte plugin, you can convert markdown files to Svelte components.

For example, Input:

---
title: Markdown to Svelte
---

# Convert Markdown to Svelte Component

- List
- List
- List

<script>
    import MyComponent from './MyComponent.svelte'
</script>

<MyComponent>You can use Svelte components in Markdown</MyComponent>

Output:

<script context="module">
  export const frontmatter = { title: "Markdown to Svelte" };
</script>

<script>
  import MyComponent from "./MyComponent.svelte";
</script>

<svelte:head>
  <title>Markdown to Svelte</title>
  <meta property="og:title" content="Markdown to Svelte" />
</svelte:head>

<div class="markdown-body">
  <h1>Convert Markdown to Svelte Component</h1>
  <ul>
    <li>List</li>
    <li>List</li>
    <li>List</li>
  </ul>

  <p>
    <MyComponent>You can use Svelte components in Markdown</MyComponent>
  </p>
</div>

💿 Installation

npm install --save-dev vite-plugin-svelte-md

📖 Usage

with Vite

Add it to vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import svelteMd from "vite-plugin-svelte-md";

export default defineConfig({
  plugins: [
    svelteMd(), // <--
    svelte({
      extensions: [".svelte", ".md"], // <--
    }),
  ],
});

with SvelteKit

Edit svelte.config.js

// svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: [".svelte", ".md"], // <--
};

Add it to vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import svelteMd from "vite-plugin-svelte-md";

export default defineConfig({
  plugins: [
    svelteMd(), // <--
    sveltekit(),
  ],
});

Options

import svelteMd from "vite-plugin-svelte-md";
svelteMd({
  headEnabled: true,
  markdownItOptions: {},
  markdownItUses: [],
  wrapperClasses: "markdown-body",
});

`headEnabled`

Enables head tag generation from frontmatter. The default is true.

`markdownItOptions`

markdown-it's option. See markdown-it's docs for more details.

`markdownItUses`

An array of markdown-it's plugins.

Example:

svelteMd({
  markdownItUses: [require("markdown-it-anchor"), require("markdown-it-prism")],
});

`wrapperClasses`

The class name of the div that wraps the content.

🎏 Comparison

vite-plugin-svelte-md is not the only library that converts Markdown to Svelte components:

	ota-meshi/vite-plugin-svelte-md	pngwn/MDsveX
Popularity
License	MIT	MIT
Architecture
Markdown parser	markdown-it (supports plugins)	remark + rehype (supports plugins)
Transformation step	Vite plugin (compatible with other Vite plugins, e.g. `@sveltejs/enhanced-img`)	Svelte preprocessor
Features
Frontmatter	✅ (YAML, JSON or JS) Accessible through `{frontmatter.variable}`	✅ (YAML, can be changed) Accessible through `{variable}`
`<head>` tag generation	✅ (from frontmatter, can be disabled)	⚙️ (possible with layouts)
Syntax highlighting	⚙️ (bring your own in `markdownItOptions.highlight`)	✅ (defaults to Prism, can be changed)
Replace any HTML tag after Markdown processing	❌	✅
Layout	Optional wrapper `<div>` with classes	Svelte components, configurable in frontmatter
Fancy typography replacements (e.g. `...` → `…`)	✅	✅
+page.md (in SvelteKit)	✅	✅