Code screenshot

Input
Output

Code Screenshot Generator

Paste code and get a picture of it for a slide, a blog post, a tweet or your docs. Pick the language and a theme (Dracula, GitHub, One Dark, Monokai, Nord or Solarized), a macOS-style window with a file name, and a gradient behind it. Highlight the lines that matter and save it as a sharp PNG, an SVG or a JPEG.

How do I use the Code screenshot?

  1. Paste your code and pick its language.
  2. Choose a theme, a background and the window.
  3. Pick PNG, SVG or JPEG under Save as, then save.

What does the Code screenshot do?

  • 13 languages, from JavaScript and Python to Go, Rust, SQL and Shell
  • 7 editor themes
  • macOS window with a file name, or none
  • Line numbers from any start, and highlighted lines
  • Gradient backgrounds or a transparent PNG
  • PNG at twice the size, so it stays sharp
  • SVG with the font inside, so it looks the same everywhere

Frequently asked questions

Is my code uploaded?
No. The picture is drawn in your browser; your code stays on your device.
Why SVG?
An SVG stays sharp at any size and its text can be searched. The font is inside the file, so it looks the same in any browser. Pick PNG for places that don't take SVG, like most social sites.
What happens to very long lines?
Lines over 120 characters wrap onto the next row, without a line number, so the picture keeps a readable width.

More JSON tools

Bracely has 98 JSON tools in one page. Related ones:

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated · Version 5.5 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram