The Markdown Kitchen Sink

This post exists to show off (almost) every Markdown element mdsvex knows how to render, finishing with a couple of live Svelte components dropped right into the content.

Headings

An h3 heading

An h4 heading

An h5 heading

An h6 heading

Emphasis

Plain text, bold text, italic text, bold italic text, strikethrough text, and inline code.

Links and images

An inline link to the blog index, and a bare autolink: https://svelte.dev.

Blockquotes

A single-level blockquote.

A nested blockquote, for when one level of disagreement isn’t enough.

Lists

Unordered, with nesting:

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered, with nesting:

1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step

A GFM task list:

• Write the kitchen sink post
• Wire up mdsvex
• Sleep

Horizontal rule

---

Tables

Element	Supported
Tables	Yes
Task lists	Yes
Footnotes	No

Code blocks

Fenced code, highlighted with the Dracula Prism theme:

interface Post {
	title: string;
	date: string;
}

function greet(post: Post): string {
	return `Reading "${post.title}"...`;
}

A live Svelte component

Since this file is compiled by mdsvex, it’s a real Svelte component under the hood — <script> blocks, runes, and event handlers all work inline:

Clicked 0 times

Imported components work too:

Brain Juice Back to the index

Margin commentary

Some claims deserve a footnote that doesn’t interrupt the sentence. Wrapping a span of text in the annotated phrase† This is the marginal note. It sits to the right of the paragraph it annotates on wide screens, and expands in place on narrow ones. anchors a note to that exact spot — it floats into the right margin on wide screens, and becomes a tap-to-expand marker on narrow ones. You can drop as many of these into a paragraph as needed, like this one† A second note, stacked below the first if they land close together., without breaking the reading flow.