Markdown formatting examples

This post demonstrates every formatting option available. Use it as a reference when writing.

Headings

Above is an h2. Below are h3 and h4:

This is an h3 heading

This is an h4 heading

Use headings to structure long posts. Don’t skip levels (e.g., don’t go from h2 to h4).

Text formatting

Regular paragraph text. You can use bold text for emphasis, italic text for titles or subtle emphasis, and bold italic when you really mean it.

You can also use inline code for technical terms, file names like config.json, or short code snippets like const x = 42.

This is a blockquote. Use it for pulling out key insights, quoting others, or setting apart important ideas. It creates visual hierarchy and gives readers a place to pause.

Here’s a paragraph with a link to an external site and a link to another page on this site.

Lists

Unordered lists

Things I care about:

• Clarity in communication
• Systems that scale
• Code that reads like prose
• Deleting more than I write

Nested unordered list:

• First level item
  • Second level item
  • Another second level
    • Third level, if you need it
• Back to first level

Ordered lists

Steps to deploy:

1. Write your content in Markdown
2. Commit to the repository
3. Push to main branch
4. Vercel builds automatically
5. Live in 30 seconds

Nested ordered list:

1. Planning phase
   1. Define requirements
   2. Sketch architecture
   3. Identify risks
2. Implementation phase
   1. Write code
   2. Write tests
   3. Refactor
3. Deployment phase

Mixed lists

• Unordered parent
  1. Ordered child one
  2. Ordered child two
• Another unordered parent

Code blocks

Inline code was shown above. For longer code, use fenced code blocks:

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

const message = greet('world');
console.log(message);

Python example:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Print first 10 numbers
for i in range(10):
    print(fibonacci(i))

Shell commands:

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Images

Images can be added from the public/ folder or external URLs.

Local image (place files in public/images/):

External image:

Images with captions (using italics below):

A developer’s natural habitat: code on screen, coffee nearby.

Horizontal rules

Use horizontal rules to create visual breaks between sections:

---

Content continues after the break.

Tables

Feature	Status	Notes
Markdown	Done	Full support
Tags	Done	Filterable
RSS	Done	Auto-generated
Search	Planned	Future addition

Right-aligned and centered columns:

Left	Center	Right
Text	Text	Text
More	More	More

Special characters

You can use HTML entities or just type Unicode directly:

• Em dash: —
• En dash: –
• Ellipsis: …
• Arrows: → ← ↑ ↓
• Quotes: “curly” vs “straight”

Combining elements

A real post might combine several elements. For example, here’s a technical explanation:

How the build process works

When you run npm run build, Astro:

1. Collects content from src/content/
2. Validates frontmatter against your schema
3. Renders Markdown to HTML
4. Generates static pages for each route

The entire site builds in under 3 seconds. Static sites are fast.

Key files involved:

• astro.config.mjs — main configuration
• src/content.config.ts — content schemas
• src/pages/**/*.astro — route definitions

# Watch the build happen
npm run build -- --verbose

---

That covers the main formatting options. Delete this post when you’re comfortable with the syntax, or keep it as a reference.