NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
Base64ChmodCode imageCronCSV viewerFormatterHTML entitiesHTTP codesJSONJSON convertJSON to TSJWTMarkdownMock JSONNumber baseRegexSubnetTimestampTokensURL parserUUID

Code to Image

Turn code into a highlighted image with themes, window frame and line numbers, as PNG.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

In the code box, Tab adds an indent. Press Esc, then Tab, to move on to the next field.

Size

The image uses your device's own monospace font, so it can look slightly different on another computer. Highlighting comes from a small built-in highlighter that knows the common parts of each language (keywords, strings, comments, numbers, names); it does not run or check your code. Nothing you paste leaves your browser.

How to use it

  1. Paste your code into the box.
  2. Pick the language, or leave it on detect, then choose a theme, a background and the window style.
  3. Adjust padding, font size, corners, line numbers and the shadow while watching the preview.
  4. Choose 1x, 2x or 3x and download the PNG, or copy the image straight to the clipboard.

Questions

Which languages are highlighted?

JavaScript, TypeScript, Python, PHP, HTML, CSS, JSON, SQL and Bash or shell scripts. Anything else can be shown as plain text in the same frame.

What do 1x, 2x and 3x mean?

The pixel density of the PNG. 1x is the size you see in the preview layout; 2x and 3x have two or three times as many pixels in each direction, so the image stays sharp on high resolution screens, in slides and when zoomed. 2x suits most posts.

Why does Copy image not work in my browser?

Copying images needs a browser that supports writing images to the clipboard, which current Chrome, Edge, Safari and Firefox do, and some only on a secure page and after a click. If it fails, download the PNG instead.

Is my code uploaded?

No. The image is drawn on a canvas in your browser and saved from there. Nothing is sent to NerdBible or anyone else.

Can I use a transparent background?

Yes. Pick Transparent as the background and the area around the window is left clear in the PNG.

About this tool

About code to image

Sharing code as an image keeps its formatting intact in slides, documentation, social posts and chat apps that mangle indentation. Paste your code, pick a look and download a sharp PNG.

Highlighting

A small built-in highlighter colours keywords, strings, comments, numbers, function names and types for JavaScript, TypeScript, Python, PHP, HTML, CSS, JSON, SQL and Bash. Leave the language on detect and it guesses from the code, or choose it yourself. Anything else can be shown as plain text.

Styling options

  • Themes: light, dark and a black and white option for print.
  • Background: gradients, solid colours or transparent.
  • Window: a title bar with three dots, a plain bar or no frame, with an optional file name.
  • Layout: padding, font size, corner radius, line numbers, tab width and a drop shadow.

Export

Download a PNG at 1x, 2x or 3x pixel density, or copy the image straight to the clipboard where the browser allows it. The image uses your device's own monospace font, and your code is drawn in your browser and never uploaded.

Related tools