Demo

This page doubles as a tour of everything a cheatsheet can use. Every construct below is plain Markdown, GitHub-flavored Markdown, or a small piece of JSX, and it all renders in the house style with no extra client JavaScript.

Text

Paragraphs wrap at the column width. Inline styles: bold, italic, struck, inline code, and a link to another sheet, an external link (opens in a new tab), and an autolink: https://nextjs.org (opens in a new tab). Footnotes work too.¹

Keys render as chips: ⌘ K opens search.

Third-level heading

Headings get ids, so #third-level-heading links straight here: jump.

Lists

• Unordered lists get the * marker from the original site
• Nested items
  • indent by two spaces
  • and keep the marker
• Done

1. Ordered lists
2. keep their numbers
3. and align

• Task lists render as brackets
• not native checkboxes

Tabs, steps, callouts and cards

Four more components are available without an import. <Tabs> switches panels; give several groups the same persist key and they change together and remember the choice.

bun add katex

npm install katex

<Steps> numbers a procedure like the site's lists:

1. Write the sheet

   Add a file under content/<topic>/ with a title and a date.

2. Check it

   Run bun run dev and open the page.

3. Ship it

   Run bun run build; every sheet is prerendered.

<Callout> takes a type of info, warn or error and an optional title:

<Cards> lists links with a description each:

Including files

Partials are MDX files whose names start with _. Import one and use it as a component:

import Shared from "./_shared-snippet.mdx";
 
<Shared />

This paragraph lives in _shared-snippet.mdx. Files whose names start with an underscore are partials: they never become pages, and any sheet can pull them in with an import.

The table of contents in the right margin is generated automatically from the ## and ### headings.

Quotes and notes

Blockquotes carry a dotted rule on the left. Good for a definition or a quoted rule of thumb.

Code

Fenced blocks are highlighted at build time. Name the language after the fence.

def spacing(step: int, base: int = 4) -> int:
    """Return a value on a 4pt spacing scale."""
    return base * step

:root {
  --space-1: 4px;
  --space-2: 8px;
}

bun run dev   # dev server on the Bun runtime

- padding: 13px;
+ padding: var(--space-3);

Blocks without a real language stay plain, still boxed.

Titles, highlighted lines, line numbers

Add a title, a line range and showLineNumbers after the language: ```python title="spacing.py" {2,4-5} showLineNumbers

BASE = 4
 
def spacing(step: int) -> int:
    """Return a value on the spacing scale."""
    return BASE * step
 
print(spacing(3))

File trees

A tree fence draws a directory layout from an indented outline: two spaces per level, a trailing / for directories, # text for a comment. Fence meta takes a title.

repo/├── apps/│   └── web/              # Next.js app│       └── package.json├── packages/│   └── ui/│       ├── src/│       └── package.json  # "name": "@acme/ui"├── pnpm-workspace.yaml└── package.json

Color, demos and diagrams

<Swatches> draws color chips (hex, rgb(), hsl() or oklch()); weights adds a proportion bar. <Scale> builds a 50–950 tonal scale from one OKLCH hue, and <Contrast> grades a pair against WCAG. All three are computed at build time.

An html fence with demo in its meta also renders live, in a sandboxed frame that follows the site theme. height= sets the frame height.

<style>
  .row { display: flex; gap: 8px; }
  .row div { flex: 1; padding: 12px; border-radius: 4px;
    background: var(--graph-0); color: white; }
  .row div:nth-child(2) {
    flex: 2; background: var(--graph-2); }
</style>
<div class="row">
  <div>flex: 1</div><div>flex: 2</div><div>flex: 1</div>
</div>

<Diagram> inlines an SVG from public/images/diagrams/, so it follows the theme.

Tables

Columns can be left- or right-aligned. Wide tables scroll sideways inside the column.

Images

Files under public/images/ get real dimensions at build time and load through next/image.

Details

Math

LaTeX between single dollars is inline, $E = mc^2$, and between double dollars is a display block:

Rendered at build time by KaTeX; Math fundamentals has more.

Expressions and exports

MDX can evaluate JavaScript at build time. This page exports meta at the top and reads it here: last updated 2026-09-04 by Zach. Arithmetic works too: 4 × 6 = 24.

A horizontal rule above. Footnotes collect at the bottom of the page.