svelte-preprocess-markdown

Allows to import *.md files as Svelte component. Very useful when your components have a lot of formatted texts and you doesn't want to write it in HTML. It is based on superfast Marked markdown parser.

Documentaton

• Please, see the Docs for more info
• Or try yourself in the our Playground

Installation

Install package:

npm i -D svelte-preprocess-markdown

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

Common usage

<script>
    import Child from './Child.svelte';
    let name = 'world';
</script>

# Hello {name}!

This is text in `markdown` **notation**

<Child />

<style>
    h1{
        color:red
    }
</style>

MDSv usage

The MDSv format is MDX-like way to write documents using imported Svelte-components.

import Block from './Block.svelte';
import { data } from './my_data.js';

# The MDSv example

You can use *components* and a *logic* inside doc:

<Block color="red">
  My `data` list:
  {#each data as item}
    {item}
  {/each}
</Block>

Options

You can pass any options that are accepted by Marked.

...
plugins: [
    svelte({
      ...
      preprocess: markdown({
          headerIds: false
      })
      ...
    })
  ]
...

Renderer

If you need renderer object for options, you can get it from the package:

const {Renderer} = require('svelte-preprocess-markdown');

const renderer = Renderer();

renderer.heading = function (text, level) {
    ...
};

const options = {renderer};