Hello, world — webdog.dev

This post is a kitchen sink — every GitHub-flavored markdown feature we render lives somewhere in this file. Treat it as a visual reference.

Headings and anchors#

Hover any heading and a # link should appear to the right. Clicking it permalinks to that section.

Inline formatting#

You can write bold, italic, both, ~~strikethrough~~, inline code, and footnotes¹.

Autolinked URLs work too: https://astro.build.

Lists#

A regular list:

Forest green
Pine green
Sage green

A task list:

Wire up GFM
Style the alerts
Buy a small plant for the desk

Tables#

Token	Light	Dark
`--bg`	`#FAFAF7`	`#0A1614`
`--text`	`#1B1B1B`	`#EDE5D8`
`--accent`	`#1F5E44`	`#95D5B2`
`--accent-strong`	`#287757`	`#B4E2C8`
`--visited`	`#7B6A2C`	`#D4B25A`

Blockquotes#

The best time to plant a tree was twenty years ago. The second best time is now.

GitHub-style alerts#

NOTE

A general note. Useful for adding context without raising a flag.

TIP

A friendly suggestion. Use this for optional improvements.

IMPORTANT

Something the reader really should not skip.

WARNING

Heads up — there’s a sharp edge here.

CAUTION

Don’t do this unless you know what you’re doing.

Code#

Inline const x = 1 plus fenced blocks with syntax highlighting:

type Theme = 'light' | 'dark';

function applyTheme(theme: Theme): void {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}

npm install
npm run dev

:root {
  --accent: #1b4332;
}
[data-theme='dark'] {
  --accent: #74c69d;
}

Math#

Inline math like $E = mc^2$ should render with KaTeX. So should display math:

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

Mermaid diagrams#

flowchart LR
  A[Markdown post] --> B[remark plugins]
  B --> C[rehype plugins]
  C --> D[HTML]
  D --> E((Browser))

Emoji#

Shortcodes turn into Unicode emoji at build time: 🌱 🌿 🌲 🚀.

Images#

A small green leaf

That’s the lot. If something here looks wrong, it’s a styling bug — file an issue.

Like this one. ↩