Markdown Test

This post exists to test and demonstrate every formatting feature available. If something looks broken here, it’s broken everywhere.

Heading level 2

The table of contents on the left is generated from h2 and h3 headings. Each one gets an automatic ID for anchor links.

Heading level 3

It shows up indented in the TOC.

Heading level 4

Not in the TOC, but still styled.

Heading level 5

Even smaller.

Heading level 6

The smallest heading available.

Text formatting

This is a regular paragraph. It has bold text, italic text, and bold italic together. You can also use strikethrough to cross things out.

Inline code looks like this. It’s useful for referencing variables, filenames, or commands within prose.

Links

Here’s a regular link and here’s one to another post on this site.

Blockquotes

The best writing is rewriting.

— E.B. White

Nested quotes work too:

Someone once said:

Make it work, make it right, make it fast.

And they were right.

Lists

Unordered:

• First item
• Second item with more detail
• Third item
  • Nested item
  • Another nested item
• Fourth item

Ordered:

1. Set up the project
2. Write the content
3. Deploy
4. Repeat

Code blocks

Inline code was shown above. Here’s a fenced block:

function greet(name) {
  return `hello, ${name}`;
}

console.log(greet('world'));

And one with no language specified:

just plain text
in a code block
nothing fancy

A longer example:

/* the entire theme toggle is CSS-only */
@media (prefers-color-scheme: light) {
  :root:has(#theme-toggle:checked) {
    --bg: #111111;
    --text: rgba(255, 255, 255, 0.9);
  }
}

Images

Horizontal rules

Content above the line.

---

Content below the line.

Tables

Feature	Status	Notes
Headings	✓	h2 and h3 in TOC
Bold / italic	✓	standard markdown
Code blocks	✓	fenced with backticks
Sidenotes	✓	custom syntax
Tables	✓	pipe syntax
Dark mode	✓	CSS-only, no JS

Sidenotes

Sidenotes are a custom feature¹1: This is sidenote number one. On wide screens it floats into the right margin. On smaller screens it appears inline.. They use the syntax ^[id: text] in the source.

You can have multiple sidenotes in a single post²2: This is the second sidenote. Each one gets its own number and renders independently.. They’re great for tangential context without breaking the reading flow.

Combined formatting

Note: You can combine features. Here’s a blockquote with inline code, a link, and bold text all at once.

A paragraph with a sidenote³3: Sidenotes work alongside any other formatting — bold, links, code, whatever., followed by a list:

1. Step one — set up svelte.config.js
2. Step two — write .svx files
3. Step three — deploy with npm run build

That’s it

If everything above renders correctly, the markdown pipeline is working. Go write something real.