October 9, 2026

Syntax highlighting for Svelte, TypeScript, and 19 more

Code blocks in Editable now have syntax highlighting. You can pick a language from the layout selector and your code turns pretty. Best of all, this not only works for readers when they view the page but code is also colored live while you are editing.

Highlighting is powered by Twinkleplop, a lightweight and fast syntax highlighter and code authoring toolkit:

Languages load on demand. A page only downloads the grammar for the languages it actually uses, so we don't transfer unnecessary data.

Highlighting is ready on page load. You'll see colored code from the first paint — no flash of plain text.

Native highlighting during editing. The implementation uses the CSS Custom Highlight API, so our editing engine doesn't have to deal with additional markup when mapping cursor positions.

Highligthing huge chunks. When a block goes beyond 50,000 characters, highlighting is turned off, but only during editing. As soon as you get below the limit again, it comes back automatically.

Editable currently highlights 21 languages: Bash, CSS, Diff, Dotenv, Go, HTML, HTTP, INI, JavaScript, JSON, JSON with Comments (JSONC), Markdown, Python, Rust, Shell Session, SQL, Svelte, TOML, TSX, TypeScript and YAML.

/** Estimates how long a task will really take. Battle-tested. */
export function estimate(task: string): string {
	if (task.includes('quick fix')) return 'see you next sprint';
	const guess = task.length / 10;
	return `${guess}h (actually ${guess * Math.PI}h)`;
}

/** Fixes any bug. Requires coffee. */
export function debug(bug: Error, coffee = Infinity): never {
	while (coffee-- > 0) console.log('why?');
	throw bug; // it was a typo
}

Try it out yourself. Hold ⌘ (Mac) or Ctrl (Windows) and press E to enter edit mode. Now you can edit the code block above. Use the layout switcher in bottom left corner of the window to change the language.

Last updated October 9, 2026

Try Editable

Live demo →

Install ⤓