Skip to content
Marvin's Toolbox.

Code to Image

Turn a code snippet into a clean image for docs, slides and posts. Pick a language, syntax theme, font size and window style, set the background and padding, then download a sharp PNG or copy it to the clipboard.

Runs entirely in your browser. Nothing you put in here gets uploaded.

Preview

Export scale
TypeScript

Code

Syntax theme
Font size15 px
Tab width

Or click a line in the preview.

Window

Style

A file name also sets the language and the download name.

Width
Long lines
columns

Background

Padding8%

Next steps

Send this tool's output straight into another tool.

Image Annotator

Draw arrows, boxes, text, highlights and numbered steps on a screenshot, blur or pixelate anything private, crop the result and add a watermark. The finished image downloads as PNG or JPG or goes straight to your clipboard.

mediaimage

JPG Image Compressor

Compress images to JPEG at a target file size or quality, with presets for WhatsApp, Instagram and Discord, optional resizing and EXIF kept or stripped.

mediaimagecompress

Image Converter

Convert images between JPEG, PNG, WebP and AVIF, and open iPhone HEIC photos too. Drop in as many as you like, pick a format, and dial in the quality for the lossy ones. When you convert to JPEG, choose the colour that fills any transparency. Live previews, download one or all at once.

mediaimageconverter

EXIF Editor

See and edit the EXIF metadata inside a photo, then download it with your changes or save a copy with all metadata removed, GPS included. It reads JPEG, PNG, HEIC and more, and edits JPEG files.

mediaimageexif

EXIF Transfer

Copy the EXIF metadata from one photo onto another without changing the destination's pixels. That covers camera model, lens, focal length, exposure, GPS and more. Choose to replace all metadata or only fill in what the source provides.

mediaimageexif

Hash Generator

Hash text or a file with MD5, SHA-1, SHA-256, SHA-512, SHA-3, BLAKE2, BLAKE3, CRC32 and more, all computed live as you type. Compare against an expected checksum and copy any digest.

devsecurity

Checksum Validator

Verify a file against its checksum. Drop the file and paste the expected hash or a sha256sum line, and the hash type is detected for you, from MD5 to BLAKE3.

devsecurity

Data Compressor

Compress text or a file with gzip, deflate, brotli or Zstandard and see the size before and after, the compression ratio and how long it took. One click tries every method and recommends the smallest result.

devcompress

Data Decompressor

Decompress gzip, deflate, brotli or Zstandard data from a file or pasted Base64 and read the result as text or download it. Detects the format from the magic bytes where possible, with a manual override.

devcompress

About the Code to Image Tool

This tool turns a code snippet into a clean image for docs, slides and social posts. Paste your code and it appears highlighted in a window on a gradient, with the language worked out for you from the file name or the code itself.

Pick one of ten syntax themes, set the font size and the window style, mark the lines that matter, and export a sharp PNG at up to four times the size. The file downloads or goes straight to your clipboard, ready to paste.

What you can do

  • Create a code screenshot without taking a screenshot
  • Convert a code snippet to PNG
  • Share code as an image on social media or in slides
  • Highlight specific lines in a code image
  • Make a code image with a transparent background
  • Add line numbers and a file name to a code snippet image
  • Export a high resolution code image for print or retina screens
  • Copy a syntax highlighted code image to the clipboard

How to use the Code to Image

  1. 1Paste your code into the Code pane. The language is detected, or you can pick it under Language.
  2. 2Choose a syntax theme and font size, and turn line numbers on or off.
  3. 3Set the window style and title, then pick a gradient or a solid color under Background. Switch the background off for a transparent PNG.
  4. 4Click lines in the preview to highlight them, or type a list such as 2, 5-8 into Highlight lines.
  5. 5Pick an export scale, then use Download PNG or Copy PNG. To add arrows or notes, send the image on to the Image Annotator.

Languages and detection

More than 40 languages are supported, including TypeScript, JavaScript, Python, Go, Rust, Java, C, C++, C#, Ruby, Swift, Kotlin, SQL, shell scripts, Dockerfiles, YAML, TOML and JSON. A file name in the Title field settles the language first, so main.go always highlights as Go. Without one, the tool reads the code, and when it can't tell, the snippet stays plain text until you pick a language yourself.

Long lines and image width

With Auto width the window hugs your code and wraps at the column you set, 80 by default. Fixed width pins the window to an exact pixel size, which helps when several images should line up in a post or a deck. Switch Long lines to Extend width to keep every line whole and let the longest one set the width instead.

Very large snippets are cut off at 500 lines and 1,000 characters per line, because an image that size can't be read anyway. Browsers also limit how big an image can get, so a huge export drops to the largest scale that fits, and the tool tells you when that happens.

Which export scale to pick

The text is drawn fresh at the size you export, so it stays sharp at every scale rather than being stretched. 2x suits most uses and looks crisp on high density screens. 1x gives the smallest file for chat and email, and 3x or 4x are for print and large slides.

Related tools

Tools that share a tag with this one.

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

Favicon Generator

Turn any image into a complete favicon set: a multi-size favicon.ico, PNG icons in every common size, Apple touch and Android icons, a web manifest and the HTML tags to paste into your page. Download everything as a zip.

devimagemedia

Image Diff Viewer

Compare two images and see exactly what changed. Slide between them horizontally or vertically, blink or blend them over each other, view them side by side, and let the pixel diff highlight every changed region with a difference percentage.

mediaimagedev

SVG Optimizer

Shrink an SVG with SVGO. Paste the markup or drop a file, toggle every optimizer plugin individually, set the numeric precision and multipass, and compare the size before and after. Copy the result or download it as a file.

mediaimagecompressdev

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Color Blindness Simulator

See any image the way people with a color vision deficiency see it. Drop in a picture and preview protanopia, deuteranopia, tritanopia, the milder anomalous forms and monochromacy next to the original, then download any simulation as a full resolution PNG.

mediaimagecolor