Introduction

Write your content in standard Markdown. Each ## Heading becomes a collapsible section with an expand/collapse arrow. A sticky Table of Contents sidebar is auto-generated on wide screens from all your ## and ### headings.

Code Blocks

Fenced code blocks get syntax highlighting and a one-click copy button automatically.

def greet(name: str) -> str:
    return f"Hello, {name}!"

const greet = (name: string): string => `Hello, ${name}!`

# Shell commands look great too
docker run -p 8080:80 nginx

Images and Diagrams

Place image files in app/public/blog/posts/YYYY-MM-DD-your-slug/ and reference by filename:

For dark mode: images automatically get a light background so dark-on-light diagrams stay readable. Add class="img-keep-dark" via raw HTML to opt out.

Tables

Blockquotes

Use blockquotes for key insights, quotes from papers, or callout warnings. They render with a blue left border and subtle background.

Interactive Widget (responsive + theme-aware pattern)

Every inline HTML visual follows the same pattern: a unique viz-* wrapper class, a scoped <style> block with light defaults and a [data-theme="dark"] override, and a @media (max-width: 640px) block for small screens.

Flow Diagram (responsive arrows that rotate on mobile)

The arrows use ::after pseudo-elements that flip from → to ↓ when the row wraps, so the flow never looks broken on a phone.

Stat / Card Grid (auto-fit grid pattern)

Use CSS Grid with repeat(auto-fit, minmax(...)) for any card layout — it reflows from 4-up to 2-up to 1-up automatically without media queries.

Callout / Tip box

Theme-aware via design tokens — no <style> block needed. Swap the colour for ⚠️ Warning (amber #d97706), 🚨 Danger (red #dc2626), or 📝 Note (var(--accent)).

Tabbed before/after comparison

// before code here

// after code here

Metric bar chart

Horizontal bars with token-based theming. Bar widths stay readable from 320px upward because the row wraps and labels sit above the bar.

Interactive quiz

GitHub repo card

YouTube embed (responsive 16:9)

Mermaid diagram (CDN-rendered)

Mermaid picks up the current theme automatically — theme is read from the data-theme attribute at render time.

Conclusion

Wrap up the article. Consider linking to related posts or external resources.

Key takeaways:

• Point one
• Point two
• Point three