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.


Basic Usage


The library renders your markdown in plain HTML by default.


Custom renderers


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.


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.


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.