Code to Image (Screenshot)
Convert code snippets to beautiful shareable PNG images.
关于此工具
Code to Image renders your code inside a styled macOS-style window frame and exports it as a PNG — entirely in the browser, with no server uploads. Choose from five themes (Monokai Dark, Light, Dracula, Nord, One Dark), toggle line numbers, adjust font size and padding, and pick a solid color, gradient, or transparent background. A regex-based syntax highlighter colours keywords, strings, and comments for JavaScript, Python, TypeScript, CSS, HTML, SQL, and Bash. Perfect for blog posts, social media, or documentation.
使用方法
- 1 Paste your code into the editor.
- 2 Select your language, theme, and background style.
- 3 Adjust font size, padding, and toggle line numbers.
- 4 Preview updates live in the window frame below.
- 5 Click Download PNG to save the image.
Why a code screenshot beats a copy-paste
When you want to show code in a blog post, a slide, or a social media thread, raw pasted text loses its colour, picks up the platform's font, and often mangles indentation. A rendered image of the code keeps the syntax colours, the monospaced alignment, and a tidy framed presentation that reads as "this is code" at a glance. This tool produces that image entirely in your browser: you paste a snippet, dress it in a macOS-style window frame with a coloured or gradient background, and export a PNG. Nothing is uploaded — the rendering happens locally — so even proprietary or unreleased code is safe to format here.
How the syntax highlighting works
The colours come from a regular-expression highlighter, not a full language parser. For your chosen language the tool runs a sequence of passes over the text: it first marks comments (//, /* */, and # forms), then string literals in single, double, or backtick quotes, then numbers, and finally a language-specific list of keywords. Each match is wrapped in a coloured span drawn from the active theme. Seven languages have keyword sets — JavaScript, TypeScript, Python, CSS, HTML, SQL, and Bash — and anything else renders as plain, correctly-coloured text without keyword emphasis. Because it is regex-based rather than a real parser, it is fast and works offline, but it can occasionally miscolour an edge case (a keyword used as a variable name, for instance); for sharing snippets that trade-off is rarely noticeable.
The five themes
| Theme | Style | Good for |
|---|---|---|
| Monokai Dark | Warm dark, vivid pink/green accents | The default; high contrast on dark slides |
| Dracula | Purple-tinted dark, soft pastels | A gentler dark look |
| Nord | Cool blue-grey, muted palette | Calm, low-saturation aesthetics |
| One Dark | The familiar Atom editor scheme | Matching a typical editor screenshot |
| Light | Near-white background, dark ink | Print, light-themed blogs, documentation |
Each theme also recolours the three window-control dots and the title bar, so the whole frame stays visually consistent with the code area.
An important detail about the exported PNG
There is a difference between what you see in the live preview and what lands in the downloaded file, and it is worth knowing up front. The on-screen preview is real HTML, so it shows the full syntax colouring. The PNG, however, is drawn on an HTML canvas, and canvas cannot render HTML spans — so the exported image renders the code as single-colour plain text on the themed background, inside the same window frame, with line numbers if enabled. You still get the polished frame, the gradient backdrop, the correct fonts, and crisp output, but the multi-colour highlighting visible in the preview is not baked into the downloaded file. Plan around this: the tool is excellent for a framed, branded code card, and the preview is the place to enjoy full colour.
Resolution and sizing
The canvas renders at a 2× device pixel ratio, meaning the PNG has twice the pixel dimensions of its on-screen size. That extra density keeps the text sharp on high-DPI "Retina" displays and when the image is scaled up in a presentation. The canvas width is computed from your longest line — it measures the maximum line length and reserves room for it — so a snippet with one very long line produces a wide image. Keep lines reasonably short if you want a compact, readable card.
Practical tips
- Set the filename to match the language. The title bar shows whatever you type in the filename field (e.g.
app.py), a small touch that makes the snippet read as a real file rather than a loose fragment. - Use transparent background for overlays. The transparent option removes the outer padding colour entirely, giving you just the framed window on a clear background — ideal for dropping onto a coloured slide without a mismatched rectangle around it.
- Tune padding for social crops. More padding gives the gradient room to breathe and survives aggressive thumbnail cropping; less padding produces a tighter image for inline documentation.
Common mistakes
- Expecting the downloaded image to be colour-highlighted. As above, the PNG export is plain-text rendering. If full colour in the final file is essential, capture a screenshot of the preview instead of using the Download button.
- Selecting the wrong language. Highlighting in the preview is keyed to the language dropdown, not auto-detected. Paste Python but leave the selector on JavaScript and the keyword colours will be wrong — set the language first.
- Pasting enormous files. The tool is built for snippets. A two-hundred-line file produces a tall, hard-to-read image and a heavy canvas; trim to the few lines that make your point.