This post exists as a visual reference for every markdown element supported by this blog. Useful for checking that typography and spacing look right.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Text Formatting

Regular paragraph text. Paragraphs are separated by a blank line and flow with relaxed line-height for comfortable reading.

Bold text is rendered with font-semibold. Italic text leans for emphasis. You can also combine them: bold and italic.

Strikethrough is available too, though use it sparingly.

Links

Here is an external link and here is an internal one.

Inline Code

Use backticks to mark inline code, like const x = 42 or npm install. It renders with a monospace font and a subtle background pill.

Code Blocks

JavaScript:

function greet(name) {
  const message = `Hello, ${name}!`
  console.log(message)
  return message
}

greet('world')

TypeScript:

interface User {
  id: number
  name: string
  email: string
}

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error('Not found')
  return res.json()
}

Bash:

pnpm install
pnpm dev

Blockquotes

The purpose of a title is not to summarise but to intrigue.

You can have multi-line blockquotes too. Just start each line with >.

Lists

Unordered

• Distributed systems scale; ad-hoc architectures don't
• Consistency beats cleverness in long-running codebases
• Data structures are the foundation of good software
• Memory is not wasted space

Ordered

1. Start with the hardest thing
2. Write tests for what matters
3. Ship something small every week
4. Read the error message

Nested

• Frontend
  • React
  • Next.js
• Backend
  • Go
  • Postgres

Tables

Horizontal Rule

Separate sections with ---:

That's every element. If something looks off, check mdx-components.tsx.