mrwokkel/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.

🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

🔒 License

See the LICENSE file for license rights and limitations (MIT).