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:

``bash
npm i -D svelte-preprocess-markdown
`

Then, edit rollup.config.js file:

`js

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

`markdown


Hello {name}!

This is text in markdown notation


`


MDSv usage

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

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

The MDSv example

You can use components and a logic inside doc:


My data list:
{#each data as item}
{item}
{/each}

`




Options

You can pass any options that are accepted by Marked.

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

Renderer


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

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

const renderer = Renderer();

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

const options = {renderer};
``