Code to Image Converter

What is a code screenshot?

A code screenshot is a still image of a code snippet — usually syntax-highlighted, often with rounded window chrome and a colourful background — designed for sharing somewhere a real <pre> block won’t render. Twitter / X, Instagram, Slack, LinkedIn, blog post hero images, conference talk slides, Notion docs, README banners, recruiter pitches, and bug-report attachments all reach for them. The format was popularised by Carbon (carbon.now.sh) in 2017, then refined by Ray.so, CodeSnap, Polacode and others. The shape is now familiar enough that a code screenshot looks “wrong” without it.

What makes a good code screenshot

Three things:

• Honest syntax highlighting — keywords, strings, numbers and function names get different colours so the structure of the code reads at a glance, the same way it reads in a real editor.
• Generous padding — the snippet sits inside a coloured frame so the eye lands on the code, not on the page edge. 24–48 pixels is the sweet spot.
• High pixel density — code is mostly text, and text only looks sharp at 2× DPI or above. A 1× export looks fuzzy on every modern display; 2× looks crisp everywhere; 3× holds up when printed.

This tool defaults to all three. The five built-in themes — ToolJutsu, Dracula, Monokai, Nord, GitHub Light — cover the common preferences: warm contrast, vibrant pop, neutral pastel, high-contrast light.

How the highlighter works

Every language in the list has a hand-rolled tokeniser in src/lib/utils/code-highlight.ts. The tokeniser walks the source character by character, identifying:

• Comments — line (//, #, --) and block (/* */, =begin/=end, """…""").
• Strings — single, double, backtick, with escape-aware termination.
• Numbers — including decimal points, exponents, and basic hex literals.
• Keywords — language-specific reserved-word lists.
• Type names — capitalised identifiers (a heuristic that fits the dominant convention in C-family and TypeScript-style languages).
• Function calls — identifiers immediately followed by (.
• Operators and punctuation — coloured slightly differently so the code’s “shape” stands out.

The result is then drawn onto a canvas with the theme’s colours, fixed-width font, and your chosen padding / window-chrome / line-numbers settings. The canvas is exported as a PNG at the chosen pixel ratio.

How to use this Code to Image converter

1. Paste your code into the Code textarea, or accept the built-in JavaScript sample to see what the output looks like.
2. Pick the Language. If yours isn’t listed, use “plain text” — the snippet still renders, just without coloured tokens.
3. Pick a Theme. ToolJutsu is the brand default; Dracula and Monokai have the strongest contrast; Nord is the softest; GitHub Light is the best fit for light-mode posts.
4. Tweak Font size and Padding to taste. Defaults of 15px font and 36px padding work for most snippets.
5. Toggle Window chrome on for the macOS-style traffic-light dots, off for a cleaner look. Line numbers toggle is most useful when the snippet is more than ~10 lines.
6. Pick a Pixel ratio. 2× is right for almost everything; 3× only matters when printing.
7. Click Render image. The PNG preview appears below; click Download PNG to save.

Quality tips

For Twitter / X, a 2× export at ~12-line height and 600–800 px CSS width looks great in the timeline and crisp in expanded view. For Instagram and LinkedIn, prefer a square-ish aspect — break long lines manually before pasting so the snippet doesn’t stretch horizontally. For blog hero images, 3× DPI at 1200 px wide is the right amount of headroom for retina screens at desktop sizes.

If your code uses long lines that don’t break naturally, the tool will produce a very wide image. Editor-style soft-wrap isn’t done automatically — wrap deliberately in your source for the best visual result.

Privacy

Everything happens in your browser. The tokeniser, the canvas draw, and the PNG encode are all JavaScript on your device. Pasted code (which, in real work, is often proprietary, half-written, or contains credentials you forgot to scrub) never travels across the network. Confirm in the browser Network panel before sharing anything sensitive — but the answer doesn’t change: this page doesn’t talk to any server after it has loaded.

Compatibility notes

The output is a standard PNG. Every image viewer, social platform, chat app, slide deck and CMS displays it correctly. The tool needs a browser that supports canvas.toBlob and ResizeObserver — every browser released since 2020. Code rendered with high pixel ratios may take a moment to encode on older devices; that’s the only performance caveat.