Markdown style guide

Everything below is plain markdown — the same thing you'd type into a GitHub issue. Open this file (content/styleguide.md) next to the rendered page to see the source for each feature.

Text#

Paragraphs, bold, italic, strikethrough, inline code, and links. Inline code can be highlighted too: const x: number = 42. Emoji shortcodes work 🚀 🎉. Keys: ⌘ + K.

GitHub references are linked automatically: #3, @nnamanikester.

Lists#

• Unordered lists
• With nesting
  • like this
• and task lists
• that render as checkboxes

1. Ordered lists
2. Use mono numerals

A plain blockquote, for when someone else said it better.

Alerts#

Code#

A fenced block with a language gets a header with the language name, a copy button, and a wrap toggle. Add title="…" for a filename, showLineNumbers for numbers, and {1,3-4} to highlight lines.

export async function retry<T>(fn: () => Promise<T>, attempts = 3): Promise<T> {
  let lastError: unknown;
  for (let i = 0; i < attempts; i++) {
    try {
      return await fn();
    } catch (err) {
      lastError = err;
      await new Promise((r) => setTimeout(r, 2 ** i * 100));
    }
  }
  throw lastError;
}

Highlight words with /word/ in the meta:

def split(source: str, size: int = 512) -> list[str]:
    chunk = []
    return [source[i : i + size] for i in range(0, len(source), size)]

Inline notation comments for diffs, focus, highlights and errors:

export function Button({ label }: Props) {
  const color = "gray"; 
  const color = useTheme().accent; 
  return <button style={{ color }}>{label}</button>; 
}

const res = await fetch("/api/posts"); 
const posts = await res.json(); 
console.log(posts.length);

const unused = 1; 
JSON.parse("{"); 

Tabs#

Group blocks with :::code-group. The reader's choice is remembered across every group on the site.

const sum = (a: number, b: number): number => a + b;

def sum(a: int, b: int) -> int:
    return a + b

func Sum(a, b int) int { return a + b }

Shell blocks tagged npm2yarn become npm / pnpm / yarn / bun tabs automatically:

npm install -D vitest

pnpm add -D vitest

yarn add -D vitest

bun add -d vitest

Long blocks (over 28 lines) collapse with a "show all" button.

Tables#

Maths#

Inline $E = mc^2$ and display:

Diagrams#

Media#

Embeds — a YouTube or X link alone on a line, or the swyxkit shortcodes:

Details and footnotes#

Footnotes are collected at the bottom¹, with links back².