What does Code Screenshot actually do?

The code screenshot tool draws a snippet onto a canvas you can export as an image. It is a picture of code, not a highlighted file you can edit later. Fonts available are the ones the page loads.

When should I use Code Screenshot?

Use it for a talk slide or a social image of a short snippet.

When should I not use Code Screenshot?

Do not use the image as the only copy of the code.

What does Code Screenshot not do?

The PNG has no semantic code. You cannot search it as source. Very long snippets are cropped or scaled by the controls.

Code Screenshot

Generate beautiful code screenshots (carbon-style) with syntax highlighting, themes, and window controls. Free online — runs locally, no upload.

Theme

Font

Padding (32px)

Window title (optional)

Window controlsLine numbersCarbon-style header

1function fibonacci(n: number): number {function fibonacci(n: number): number {
2  if (n <= 1) return n;  if (n <= 1) return n;
3  return fibonacci(n - 1) + fibonacci(n - 2);  return fibonacci(n - 1) + fibonacci(n - 2);
4}}
5 
6// Print first 10 numbers// Print first 10 numbers
7const sequence = Array.from({ length: 10 }, (_, i) => fibonacci(i));const sequence = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(sequence);console.log(sequence);

Code

Tip: Right-click the preview and select "Save image as…" to download as PNG. Or copy the HTML to embed the highlighted code directly in a blog post.

Search tools

Code Screenshot