Auto-format code inside code blocks (zero-config, one keystroke)
Luca Barone
The problem
Tolaria already highlights and auto-detects the language of fenced code blocks, but it never cleans up the code itself. Pasted snippets keep their original (often messy) indentation, and there’s no way to tidy a block without hand-editing every line. For a notes app that people use to capture code, the block looks like a code editor but doesn’t behave like one.
Proposed solution
A zero-config “Format code block” action that reformats the code in the focused block using a sensible default formatter for its (already-detected) language — Prettier-style for JS/TS/JSON/CSS/HTML/Markdown/YAML to start, expanding over time. No config files, no per-language settings: it just works, and is a no-op for languages without a bundled formatter.
The UX (keyboard-first, but discoverable)
Visual trigger: when the cursor is inside a code block, a small “Format” button appears on the block toolbar (next to the existing language selector).
Command palette: a “Format code block” command, enabled only while focus is inside a code block.
Keyboard shortcut: a dedicated shortcut for the same action (e.g. ⌥⇧F, mirroring the VS Code convention), scoped to when a code block is focused.
All three drive the same action, so muscle memory, discoverability, and the command palette stay in sync.
Feedback when it can’t format
If a block can’t be formatted (e.g. the code has a syntax error, or its language has no formatter yet), leave the block untouched and surface a brief, non-blocking hint — at most a small toast. Success can stay silent: the reformatted code is its own confirmation.
How it could work (high level)
Formatting runs entirely client-side, on the focused block’s text — no backend round-trip.
Reuse the language Tolaria has already detected/selected to pick the matching formatter, then replace the block’s content with the formatted result.
A small registry maps language → formatter (e.g. a Prettier-style engine in the browser for the web-ish languages to start). Languages with no entry are simply a no-op.
It’s a pure text-in / text-out transform, so it slots in next to the existing code-block highlighting rather than touching how notes are stored.
Why it fits Tolaria
The hard part — knowing the block’s language — is already solved by the existing detection + language selector. Formatting is the natural next step on top of the Shiki highlighting that’s already shipping, and a zero-config default keeps it true to Tolaria’s “it just works” feel.
(Screenshot of Notion: the action is present but buried behind a submenu)
Photo Viewer
View photos in a modal