CodesBeautify

Code to Image

Paste a snippet and get a sharp PNG of it, ready for a slide, a README or a social post.

Code
Image

The result appears here

Result
Runs locally in your browser

About the Code to Image

Screenshots of an editor carry whatever happened to be on screen: the wrong font size, a stray tooltip, the file tree, a notification. Rendering the code instead gives a clean, repeatable picture at exactly the size you want. The snippet is drawn on a canvas at twice the requested resolution and exported as a PNG, so the text stays crisp on a retina display and when a slide deck scales it up.

Colouring is done by a small tokeniser rather than a full language grammar. It recognises line comments starting with two slashes, block comments, hash comments at the start of a line, single, double and backtick quoted strings, numeric literals and a shared list of keywords drawn from the C family, Python, Go, Rust, SQL and Ruby. That makes it usefully accurate across languages without loading a syntax library, though a language with unusual literal syntax may lose a highlight here or there.

The window bar with its three dots is optional, as are line numbers, and the caption field puts a filename in the title bar. Font size drives everything else: padding, line height and the width of the image all scale with it, so a 24 pixel setting produces a picture meant to be read across a room. Long lines are never wrapped or cut, the canvas simply grows wider, which keeps indentation honest. For rendering an SVG asset rather than code, use the SVG Viewer.

How to use

  1. Paste your snippet into the left pane, or press Sample to see one.
  2. Pick a Theme and, optionally, type a filename into the Caption box.
  3. Raise the Font size for a slide, lower it for a wide snippet.
  4. Click Download to save the PNG at twice the on-screen resolution.

Common questions

Which languages are highlighted?
One shared tokeniser covers JavaScript, TypeScript, Python, Go, Rust, Java, C, C#, PHP, Ruby, SQL and shell reasonably well. It highlights comments, strings, numbers and common keywords.
What resolution is the PNG?
Twice the layout size, so a snippet laid out at 700 pixels wide exports at 1400 pixels for a sharp result on high density screens.
Are long lines wrapped?
No. The image widens to fit the longest line, which keeps alignment and indentation true to the source.
Is there a limit on the snippet length?
Four hundred lines. Beyond that the image becomes too tall to read comfortably, so the tool asks you to trim it.