How to use the Code to Image Generator
- 1. Paste your codeUp to 80 lines of JavaScript, Python, Java, SQL, HTML or CSS.
- 2. Style itChoose theme, font size, padding, window dots, title and line numbers.
- 3. DownloadGet a PNG drawn at double resolution so it stays sharp.
How the image is made
The tool draws your code onto a canvas directly in your browser. It colours keywords, strings, numbers and comments for the language you pick, then exports a PNG at 2× resolution so the text stays crisp on high-density screens and when LinkedIn compresses it. Nothing is uploaded, and no screenshot library is needed.
The syntax colouring is simple and line-based. It is accurate for typical snippets, but very unusual code, such as strings that span several lines, may not be coloured perfectly. Tabs are turned into two spaces so indentation looks the same everywhere.
Worked example and tips
The sample is a 6-line JavaScript function with a comment, a template string and a ternary. With the Dark theme, 16px font and 40px padding, the image has a navy frame, the three window dots and the title greet.js. Keywords such as function, const and return are pink, strings are green and the comment is grey. The download message shows the exact image size in pixels.
- Keep snippets short: 5 to 20 lines read well on a phone feed.
- Use 18 to 20px fonts for posts and 14 to 16px for notes and documents.
- Add alt text when you post the image, and paste the code itself in a comment or a gist so people can copy it. Code in images cannot be searched or read by screen readers.
Frequently asked questions
Which languages are coloured?
JavaScript, Python, Java, SQL, HTML and CSS. Other code still works with plain colours.
Why is the image so large?
It is drawn at 2× so it stays sharp. Social sites resize it automatically.
Is my code sent anywhere?
No. The image is drawn in your browser.
Is it free?
Yes, free. The first download asks for your name and WhatsApp number once, then every Uncodemy tool opens without it.