Code to Image: Highlighted Code Screenshots

Your code

// Work out the canvas size for a framed screenshot
type Frame = { padding: number; radius: number };

export function frameSize(img: { w: number; h: number }, f: Frame) {
	const w = img.w + f.padding * 2;
	const h = img.h + f.padding * 2;
	return { w, h, ratio: Number((w / h).toFixed(2)) };
}

console.log(frameSize({ w: 1440, h: 900 }, { padding: 64, radius: 12 }));

Tabs become spaces and shared indentation is removed, so a snippet copied from deep inside a file starts at the left edge. Tab types a tab; press Esc then Tab to move on.

Code

Language

Theme

Text size

Wrap lines at

Line numbers

Window

Title bar

Dots Title only None

File name

Padding48 px

Shadow

Export

Format

PNG JPEG WebP

Scale

Add an image to see the output size.

Making a readable code image

Paste your code into the box; the preview redraws as you type. Pick the language yourself for the most accurate colours, or let Detect it guess from the code's shape. Fourteen languages are offered, and each one's highlighting rules load only when you first choose it.

Keep it short. Ten to twenty lines read well on a slide or in a post; beyond that, link to the full file instead.
Wrap long lines at 60 to 80 characters for social posts, where the image is shown small. Wrapped lines carry on without a new line number, so the numbering still matches your file.
Choose the theme for where it will be seen. Dark themes stand out in dark-mode feeds and on slides; Linen, Cadmium and Gallery mono suit printed handouts and light documents. In every theme the code colours have at least the 4.5:1 contrast WCAG asks for normal text; only the line numbers are fainter.
Export at 2× (the default here) so the text stays sharp on high-density screens and when a platform scales the image down.

The text is drawn in Inconsolata with one fixed width per character, so columns and indentation line up exactly as they do in your editor. An image cannot be copied as text, so when you share code to be reused, add a link to the source as well.

Questions

Is my code sent to a server for highlighting?

No. Highlighting runs in your browser with the open-source highlight.js library, which this site serves itself. The page makes no request with your code in it.

Why are some words not coloured?

Highlighters colour by grammar, not by meaning, so names you define yourself often stay plain. If most of the code looks plain, check that the right language is selected rather than Detect it.

Can I use emoji or non-Latin text?

Yes, they are drawn with your system's fonts. Characters wider than a code column can push the rest of that line slightly out of alignment.

Code, framed for sharing

Making a readable code image

Questions