Svelte Markdown Component

Install

Use NPM to install svelte-markdown to your project.

npm i svelte-markdown

Importing

The svelte-markdown library is a component that can be used just like an HTML tag. First, you need to import it from the node_modules where you installed it.

<script>
  import SvelteMarkdown from 'svelte-markdown'
</script>

Usage

Once it's imported create you can either create a variable with your markdown document in it called source and pass it to the component like below:

<SvelteMarkdown {source} />

or you can name the variable anything you like and pass it like this

<SvelteMarkdown source={markdown} />

svelte-markdown is a great tool for making a blog that is easy to update and write posts. Markdown is a great alternative to HTML if you want the feel of a WYSIWYG editor like TipTap without the extra steps of setting it up. You can read more about svelte-markdown on its GitHub here