Code to Image

Turn code snippets into beautiful syntax-highlighted shareable images

Language

Theme

Code

Background

Padding

Font

Font size (px)

File title

Show title barShow traffic lights

Preview

Lines: 8Characters: 193Language: TypeScriptFont Size: 14px

snippet.ts

function greet(name: string): string {
  // Say hello to the world
  const message = `Hello, ${name}!`;
  return message;
}

const result = greet("World");
console.log(result); // Hello, World!

Loading syntax highlighter…

Code to Image — Beautiful Code Screenshots

Paste any code snippet and instantly render it as a polished, shareable PNG. Choose from 20 programming languages (JavaScript, TypeScript, Python, Rust, Go, Java, C++, and more), two syntax themes (One Dark / One Light), 10 background gradients, and adjustable padding and font size. The image renders entirely in your browser — your code never leaves your device. Perfect for blog posts, social shares, documentation, or anywhere you want beautiful code visuals without complex setup.

Built and maintained by Meet Shah · Last updated 5 August 2026

What this tool is used for

Producing a syntax-highlighted snippet image for a slide or a social post.
Making a code graphic for a channel that strips formatting.
Producing a consistent code treatment across a set of posts.
Sharing a snippet where a code block is not available.
Making a code image for a printed handout.

Frequently Asked Questions

Why turn code into an image at all?: Because the destination cannot render code: a slide, a social post, a conference talk. Everywhere else — documentation, an issue, a chat with code blocks — real text is strictly better, since it can be copied, searched and read by assistive technology.
What are the accessibility implications?: Substantial. An image of code is invisible to a screen reader and unreadable to anyone who needs to zoom or restyle text. If it must be an image, the alt text or an adjacent code block has to carry the actual content — a caption saying "code example" carries nothing.
What makes a code image readable?: A monospace font at a size that survives compression, generous line height, and no more than about fifteen lines. Twitter and LinkedIn both re-encode uploads, so thin fonts and low-contrast comment colours are the first casualties.
How does syntax highlighting work here?: By tokenising the source for the chosen language and colouring each token class. That is why the language selector matters: highlighting JavaScript as Python produces plausible-looking colours on the wrong tokens, which is more misleading than no highlighting at all.
Should the image be PNG or JPEG?: PNG, always, for text. JPEG's chroma subsampling and block transform are tuned for photographs and produce visible ringing around sharp glyph edges — the exact artefact that makes small code text look fuzzy after upload.

Common errors and gotchas

Using an image for code anyone will need to copy, which makes it unusable.
Producing an image with no alt text or accompanying text, which excludes screen-reader users.
Choosing a theme whose contrast fails at the size the image will be displayed.
Including so much code that the text is unreadable in the final image.
Sharing an image where a plain code block would have been searchable and copyable.