How do I turn code into an image?

Paste it here, pick the language and theme, then download the PNG. The picture is drawn by your own browser at twice the display resolution, so it stays sharp when a platform scales it up.

Is it safe to use an online code-to-image tool?

Only if the rendering happens locally. Most services post the snippet to a server to render it, which is a disclosure if the code contains keys, customer data or unreleased work. This page renders on a canvas in your tab.

Should code in documentation be an image?

No. An image cannot be copied, searched, translated or read by a screen reader. Use a picture to show code in a slide or a post, and give the text as well whenever the reader needs to run it.

Which languages are highlighted?

JavaScript, JSON, HTML, CSS, PHP, Python and shell, plus plain text. The highlighter marks strings, comments, numbers and keywords - the four that carry nearly all the visual information in a snippet.

Code to image

For the places that flatten a code block into unreadable plain text - slides, social posts, a message to a client. The picture is drawn in this tab at twice the resolution, so it stays sharp on a retina screen, and the snippet is never uploaded to anyone.

Languages8 highlighted
OutputPNG at 2× resolution
Your codeNever leaves the tab

Your code

LanguageUsed only for the colouring.Window titleUsually the file name. Leave empty to drop it.

Theme

Padding: 48pxText size: 16px

Show line numbers

Preview

863 × 510 points, exported at twice that.

Copying an image to the clipboard is allowed in Chrome and Edge; Firefox and Safari restrict it, so use Download there.

Why a picture of code at all

Nowhere that matters for sharing renders a code block: a slide, a social post, a chat with a client. A picture keeps the indentation and the colour, which is most of what makes code readable at a glance.

And why not for documentation

A picture cannot be copied, searched, translated or read by a screen reader. Use it to show code, never to deliver it - if the reader needs to run the snippet, give them the text as well.

About the colouring

The highlighter here marks strings, comments, numbers and keywords - the four that carry almost all of the visual information. A full grammar per language would be a megabyte of parser for a picture, which is not a trade worth making in a browser tab.

Frequently asked questions

How do I turn code into an image?: Paste it here, pick the language and theme, then download the PNG. The picture is drawn by your own browser at twice the display resolution, so it stays sharp when a platform scales it up.
Is it safe to use an online code-to-image tool?: Only if the rendering happens locally. Most services post the snippet to a server to render it, which is a disclosure if the code contains keys, customer data or unreleased work. This page renders on a canvas in your tab.
Should code in documentation be an image?: No. An image cannot be copied, searched, translated or read by a screen reader. Use a picture to show code in a slide or a post, and give the text as well whenever the reader needs to run it.
Which languages are highlighted?: JavaScript, JSON, HTML, CSS, PHP, Python and shell, plus plain text. The highlighter marks strings, comments, numbers and keywords - the four that carry nearly all the visual information in a snippet.