Svelte markdown
pnpm i @reuters-graphics/svelte-markdown<script>
import { Markdown } from '@reuters-graphics/svelte-markdown';
</script>
<Markdown source="# Another markdown component..." />Another markdown component
At Reuters Graphics, we use Markdown as a basic transport format for the content of our graphics pages. We’ll also mix in doses of inline HTML for things like classed or styled spans.
This markdown component doesn’t use Svelte’s sometimes troublesome @html directive to render markdown. It uses parse5 to generate an HTML tree we can then walk to create individual elements, each keyed by its content, attributes and position. That gets us past pesky hydration mismatches and takes advantage of Svelte 5’s fine-grained reactivity.
Markdown parsing is done with marked (+smartypants).
It’s bundle size is about that of a medium-sized image after treeshaking, so it may not be the featherweight option you’re looking for, but it’s robust handling for dynamic markdown content is worth it for us, and in our tests, it beats other @html-less alternatives in rendering performance.
| Library | Speed* |
|---|---|
| @reuters-graphics/svelte-markdown | 1x |
| svelte-markdown | 1.76x |
| @humanspeak/svelte-markdown | 2.04x |
*Benchmarks by vitest bench.
A Subheading with a Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur metus at tellus bibendum, non rutrum nisl mollis. Aenean vel magna nunc.
Integer a mattis nulla, nec tincidunt est.
Proin interdum metus at fringilla tristique. Pellentesque eu imperdiet sem, nec iaculis libero. Integer ac justo tristique, egestas tellus vitae, feugiat felis. Sed malesuada porta odio, et sagittis nulla rutrum vitae. Fusce tincidunt turpis eget nisl tincidunt condimentum.
Donec imperdiet feugiat volutpat. Integer a mattis nulla, nec tincidunt est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas neque sapien, euismod in blandit id, blandit nec mauris.
Lists, Bold, and Italic
- Bold item in an unordered list
- Italic item in an unordered list
- Regular list item with a link
- Italic item in an unordered list
- A list item containing some inline HTML: Note here
- First in an ordered list
- Second in an ordered list
- Sub item to the above
- Final item with inline HTML: Attention!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae pulvinar risus. Nam egestas metus at mi dignissim, sed fringilla turpis porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer dapibus in lacus nec ultricies.
Nulla eu semper metus. Sed euismod justo id finibus pretium. Suspendisse neque massa, faucibus ac lacinia eget, malesuada nec eros. Vestibulum sed lobortis est, sed condimentum massa. Integer pharetra eu turpis in imperdiet.