benmccann / svelte-preprocess-markdown Goto Github PK

View Code? Open in Web Editor NEW

Write Svelte components in markdown syntax

License: MIT License

JavaScript 34.76% HTML 48.30% CSS 16.94%

svelte-preprocess-markdown's Introduction

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 accepts 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};

Recommend Projects