Code to Image
Render a code snippet as a PNG with syntax colours, a window frame and retina scaling, drawn on a canvas so it is identical everywhere.
Turn a code snippet into a shareable PNG with syntax colours, a window frame and a retina scale option.
Live preview
Drawn on a canvas rather than screenshotted, so the result is identical on every machine and the scale setting controls the real pixel size. Scale 2 is right for social media; 3 or 4 suits a slide or a print deck. Nothing is uploaded.
About the code to image
A screenshot of your editor carries your theme, your font, your line width and usually a stray notification. Rendering the snippet instead gives you something consistent and readable at the size social media actually displays it.
Everything is drawn on a canvas rather than captured from the page, so the output does not depend on your screen, and the scale setting controls real pixels rather than hoping the display is retina.
How to use it
- 1Paste your code.
- 2Pick a theme and set the window title.
- 3Adjust padding and font size until it reads well at a small size.
- 4Set scale to 2 for social, higher for slides, then download or copy.
Questions
Which languages are highlighted?
The highlighting is a small tokeniser covering strings, comments, numbers, keywords and function calls, which works across most C-like and scripting languages. It is not a parser, so unusual syntax may colour imperfectly.
What scale should I use?
2 for social media, which is what most feeds expect. 3 or 4 for a slide or anything printed. 1 only when file size matters more than sharpness.
Why not just take a screenshot?
A screenshot carries your editor theme, your font and your window width, and the result differs on every machine. This renders the same everywhere and lets you control the width.
Is my code uploaded?
No. It is drawn locally on a canvas and the PNG is produced in your browser.