Markdown style guide

This post shows how each Markdown element renders. Use it as a reference, then delete it (or flip it to Draft in the CMS so it’s hidden).

Headings and the table of contents

Any post with two or more ## headings gets a table of contents pinned to the left on wide screens. The current section highlights as you scroll.

A third-level heading

Third-level headings are slightly softer in color and aren’t listed in the table of contents.

Text

Paragraphs are set at 16px with generous line height. You can use bold for emphasis, italics that switch to a serif, links, and inline code.

Blockquotes get a thin rule on the left and muted text. Good for pull quotes or a TL;DR at the top of a post.

Lists

• Unordered lists use a soft marker
• They keep a comfortable rhythm
• And nest fine when you need them

1. Ordered lists work too
2. With the same spacing
3. And muted numerals

Code

// Code blocks get syntax highlighting and line numbers
export function greet(name: string) {
  return `Hello, ${name}!`;
}

Tables

Images uploaded in the editor land in public/images/posts/ and get rounded corners automatically.