Introducing

The svelte-preprocess-markdown is a way to use Svelte components written in Markdown syntax. You can import any *.md file as a component, which will be handled by Svelte's compiler. You can import any other component in your *.md file and use it right inside a markup. All HTMLx logic and interpolations are also supported.

The format of the MarkDown and Svelte combination is called MDSv. It is like React's MDX format, but for Svelte.

You can try svelte-preprocess-markdown in the fullpage Playground

Install

1. Install the package:

npm i -D svelte-preprocess-markdown

2. Then, edit rollup.config.js file:

// 1. import package
const {markdown} = require('svelte-preprocess-markdown');

export default {
  // ...
  plugins: [
    svelte({
      // 2. add '.md', to the extensions  
      extensions: ['.svelte','.md'],
      // 3. add markdown preprocessor
      preprocess: markdown()
    })
  ]
}

Usage

Simple markup

First of all MDSv is markdown format. The simplest component is just a markdown synatax without any Svelte's magic.

Components

You can mix svelte and markdown as you want:

Imports

Import components and use it as usual:

Import other *.md files as well:

If there are only imports in the <script> tag, you may use simplified imports:

Metadata

You can add some metadata at the top of the *.md file. All metadata will be available in META constant:

Styling

Markdown is being converted to the simple HTML-elements. If you want to style markdown markup, you should write selectors to corresponding HTML-elements. See the Markdown guide for more info.