Code to Image
Render a code snippet as a PNG for documentation, teaching or sharing. Choose an explicit programming language, theme and image dimensions. Long lines wrap at grapheme boundaries, keeping Korean text and multi-character emoji together when supported by your device’s fonts.
Key features
- Syntax coloring for JavaScript, TypeScript, JSON, Python, CSS, HTML/XML, Bash and SQL, plus plain text
- Light and dark themes with optional source line numbers
- Image width from 480 to 1,400px, adjustable font size and padding
- Export at 1× or 2× resolution with a pixel and row limit to protect browser memory
- Regenerate after changing text or settings so downloads always match the current input
How to use
- Enter a snippet or load the example, then choose its language.
- Set width, font size, padding, theme, line numbering and resolution.
- Press Generate PNG and inspect the preview and pixel dimensions.
- Download the PNG. After editing the source or options, generate a new preview.
Use cases
- Illustrate a programming lesson with short, readable code examples
- Add a syntax-colored snippet to a slide or technical article
- Share Korean comments and emoji together with a code sample
- Prepare matching light and dark versions for documentation
Frequently asked questions
Does this tool execute my code?
No. It reads source text for syntax coloring and draws it on a canvas. It does not evaluate JavaScript, run commands or mount your HTML in the page.
What are the input and image limits?
Input is limited to 12,000 JavaScript string units and 600 source lines. Wrapping may also produce at most 600 visual rows. The output must stay within 8,192 pixels per side and 16 million pixels total; long snippets may need a smaller font or 1× scale.
Are line numbers changed when a long line wraps?
No. The first visual row shows its original source line number. Continuation rows have no extra number. Tabs expand to the next four-character tab stop and CRLF or CR line endings become LF.
Will syntax colors validate my code?
No. Syntax highlighting is visual guidance, not a parser, compiler or linter. Choose the closest language; invalid or ambiguous syntax may still receive colors.
Why can emoji or Korean look different on another computer?
Canvas uses fonts available on your device, with system fallback for missing glyphs. Emoji artwork, glyph widths and antialiasing can differ. The downloaded PNG fixes the appearance produced by this browser.
Why did the download link disappear after an edit?
Changing the source or any rendering option invalidates the old PNG and releases its temporary URL. Press Generate PNG again to create an image matching the current settings.
Privacy
Code, rendering settings and generated images are processed in this page’s memory. This tool does not transmit or automatically save them to browser storage. The PNG is saved to your device only when you select Download PNG.
Comments & questions