Code to image
Render a code snippet into a syntax-highlighted PNG with dark/light themes, font size, line numbers, padding, rounded corners, shadow and a macOS-style title bar.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Everything is rendered locally in your browser; your code is never uploaded.
Preview
Image info
What this tool does
- Turn a snippet into a presentable screenshot with a dark title bar before it goes into a talk or a chat message — far easier to read than raw text.
- Attach an image to an issue or ticket so the platform cannot eat special characters or reflow your code.
- Switch to the light theme for documents on white backgrounds; font size, padding, line numbers and corner radius are all adjustable without a second pass in a design tool.
- Simplified highlighting covers a dozen-plus languages — keywords, strings, comments, numbers and function names — so JS, Python, SQL and Go all look right.
Example
Input
const greet = (name) => `Hello, ${name}!`;
console.log(greet("UniKit")); (16px font, 1.5 line height, 24px padding, line numbers on, title bar on)Output
Canvas 510 × 174 px (content area 478 × 142 plus a 16px shadow margin on each side), 2 lines, 24px line height, 26px gutter, 46px title bar; the download keeps the name snippet.png
Switching to the light theme or turning off line numbers/title bar changes the canvas size. Export goes through canvas toBlob, so the final image is drawn by the browser exactly matching the layout numbers shown here.
Frequently asked questions
Is my code uploaded anywhere?
No. Syntax colouring, layout maths and PNG export all run in the browser, the page issues no network requests, and the snippet never leaves your machine.
Which languages are supported?
A dozen-plus definitions ship with the tool: JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, SQL, Bash, JSON, YAML, CSS, Kotlin, Swift, plus a plain-text option with no highlighting. The highlighter is a simplified tokenizer, not a full parser.
Why are some keywords not coloured?
The rule is deliberately simple: a word is a keyword only if it is in the language table and is not followed by an opening parenthesis — anything with a parenthesis becomes a function name. Custom macros, decorators or brand-new syntax may therefore stay plain.
How is the image size calculated?
The width is the widest line measured in approximate monospace units (1 em for CJK, 0.6 em otherwise) plus padding and the gutter; the height is line count × font size × line height plus padding. Export adds a 16px margin on every side for the shadow, so the canvas is 32px larger than the content in each direction.
What happens if the file name is wrong?
An empty name blocks the export with a notice. The original extension is swapped for .png, so snippet.ts becomes snippet.png and a plain "snippet" also becomes snippet.png.
Keywords：code to image代码截图代码转图片syntax highlight语法高亮pngcarbon代码美化