Code Screenshot
Turn code into a beautiful, syntax-highlighted image
- Files never leave your device
- Runs in your browser
- Free, no sign-up, no watermark
Preview
Click a line in the preview to highlight it.
Loading highlighter…
How to use Code Screenshot
Turn code into a syntax-highlighted image with a window frame, theme and background, then download PNG or SVG or copy it to the clipboard. It covers 27 languages plus plain text, detects the language automatically, and highlights everything in your browser.
- 1
Paste your code into the Code box, or click Sample to try an example.
- 2
Leave Language on Auto-detect or pick one, and type a Title such as the file name.
- 3
Mark key lines in Highlight lines (for example 3, 5-7) or by clicking them in the preview, and turn on Dim other lines if you want them to stand out more.
- 4
Under Appearance and Background, choose a Theme, a Window style (macOS, Windows or None), the Font size, a gradient or solid color, and the Padding.
- 5
Under Export, set Width and Resolution, then click Download PNG, SVG or Copy image.
Frequently asked questions
Is my code sent anywhere?
No. Highlighting and drawing happen in your browser. The tool does remember your last code and settings in this browser's local storage, so press Clear when you are on a shared computer.
Which languages and themes are available?
JavaScript, TypeScript, Python, Java, Go, Rust, C, C++, C#, PHP, Ruby, Swift, Kotlin, Dart, Scala, Lua, SQL, Shell, PowerShell, JSON, YAML, HTML / XML, CSS, SCSS, Markdown, Dockerfile and Diff, plus Plain text. Themes are One Dark, GitHub Dark, GitHub Light, Dracula, Nord, Monokai, Solarized Dark and Solarized Light.
What is the difference between PNG and SVG?
PNG is a picture at 1×, 2× or 3× resolution. SVG keeps the code as real, selectable text and stays sharp at any size, but it uses the fonts installed on the device that opens it.
How do I stop long lines from making the image very wide?
Set Width to Fixed and enter an Image width between 320 and 4000 px. Long lines then wrap to fit.
Can the background be transparent?
Yes. Choose Transparent under Background and download PNG or SVG.
How is this different from Device Mockup & Screenshot Beautifier?
This tool draws code that you paste as text. To put an existing screenshot of an app or website into a frame, use Device Mockup & Screenshot Beautifier.