Style Showcase: The Notebook's Rich Content

This is the kitchen sink — a living reference for the styled bits you can drop into any post. Copy the markdown, tweak the words, ship it.

Keyboard keys

Wrap a key in <kbd> tags and it renders as a pressed keycap in the Silkscreen pixel face:

Press Ctrl + C to copy, then Ctrl + V to paste.

Save with ⌘S. Hit Esc to bail, Enter to commit, Tab to move on.

Sticky notes

Sticky notes are Obsidian-style callouts. The syntax is a blockquote with a [!type] tag on the first line. The type picks the color — the note is the same bright color in light and dark, because a sticky note is a sticky note.

The markdown for that first one:

> [!note] Yellow — the default
> Use `note`, `info`, `summary`, `tldr`, or `todo`.

Code

Inline code renders in the Geist Pixel face — like npm run dev or git push origin main — so short commands read as little pixel chips.

Fenced code blocks stay in the readable mono font with syntax highlighting:

// A code block keeps Google Sans Code for legibility.
function greet(name: string): string {
  return `Hello, ${name} — welcome to the notebook.`;
}

Quotes

A regular blockquote (no [!type] tag) renders as a quiet, indented aside with an accent rule — distinct from the loud sticky notes above.

Lists

• First the observation
• Then the reframe
• Then the one thing to try

1. Numbered when order matters
2. Like steps in a recipe
3. Or a sequence of moves

Definition lists

For a glossary — a term paired with its meaning — put the term on its own line and start the next line with a colon. It renders with the term in the hand-annotation face and the definition indented under it behind a dotted rule:

Notebook

A bound stack of pages for thinking on paper — and the metaphor this whole site is built on.

Marginalia

Notes scribbled in the margin, next to the thing they’re about.

A second definition works too — just add another marker line.

The markdown:

Notebook
: A bound stack of pages for thinking on paper.

Marginalia
: Notes scribbled in the margin.
: A second definition — just add another marker line.

Sometimes the term and its meaning want to sit on the same line — a table is too much furniture for two columns. Put a colon with a space on both sides and the definition runs on inline: the term goes bold, the colon does the separating, and anything that wraps hangs past the term.

Term bullet

A term and its definition sharing one line, split by a spaced colon.

Need a second paragraph? Start the next line with a colon and it stacks under the same term.

Hanging indent

The definition wraps under itself instead of back out to the margin, so the term stays the thing your eye lands on.

The markdown:

Term bullet : A term and its definition sharing one line.
: A second paragraph stacks under the same term.

Hanging indent : The definition wraps under itself.

A table

Images

Drop a file in public/images/ and reference it with an absolute path — ![alt text](/images/name.png). Images render bordered, centered, and click-to-zoom.

Footnotes

Here’s a claim that needs a source.¹