Marked

Svelte-Marked is a markdown parser that renders into Svelte components. It supports Github Flavored Markdown out of the box (tables, lists, raw HTML, etc.).

Each component renderer can be overwritten to customize its style and extensions can be registered to support a more advanced markdown syntax.

MarkedJS is required as a peer dependency if you want to register custom extensions or components. You may also include @types/marked so you can get access to typing.

The library renders your markdown in plain HTML by default.

Chances are that you do not want to render your website to plain HTML, but want to customize the components. To do so, simply provide a svelte component in the renderers parameter.

Example

First, we are going to create a custom component.

And then register it to customize the rendering of img .

See the tokenizer reference for a full list of default components that can be overwritten.

The marked plugin comes with a container extension that is not registered by default. The container extension will require you to define the components that will be rendered, as well as a function to convert the container data into tokens.

Example

First thing to do is to create our custom component that we will name BackgroundColor .

Once we have our component, we only have to register our extension, and pass the component as its renderer.