Code Screenshot Generator

About the Code Screenshot Generator

Paste code and get an image worth sharing: proper syntax highlighting, a window frame with a title, a gradient or solid background, line numbers and highlighted lines. Use it for slides, documentation, blog posts, social media or a pull-request description.

Highlighting is done by Shiki, which uses the same TextMate grammars and themes as Visual Studio Code — over 240 languages and 65 themes, from GitHub Dark to Dracula, Nord and One Dark Pro — so your code looks exactly as it does in the editor. The image is drawn on a canvas in your browser from the highlighted tokens, never uploaded, and exported as a PNG at up to 4× size, as a vector SVG, straight to the clipboard, or as formatted text and HTML.

Common uses

• Slides and talks, where a pasted code block loses its colours or its layout.
• Tweets, LinkedIn posts and Instagram, where code as text is unreadable.
• Documentation, READMEs and blog posts that need a consistent, themed code image.
• Sharing a snippet in chat with the lines that matter highlighted.

Export formats

• PNG: the picture exactly as the preview shows it, at 1× to 4× its size (2× looks sharp on high-resolution screens and phones). Very large images are reduced automatically to the size browsers can draw, and the size shown above the preview says so.
• Copy image: the same PNG on the clipboard, to paste into Slack, Teams, Docs or a tweet without saving a file.
• SVG: a vector image that stays sharp at any size; the code stays real text. The viewer draws it with its own copy of the font, so pick a common font if others will open the file.
• Copy formatted text: the coloured code as rich text, for Google Docs, Word, Outlook or Gmail — the reader can still select and copy it.
• Copy HTML: a <pre> block with inline colours, for web pages and Markdown that allows HTML.

Tips for readable code images

• Keep it short: 5–25 lines is the sweet spot; cut what is not needed to make the point.
• Use 15–18 px text for social media and 2× scale, so the code survives being shrunk in a feed.
• Wrap or shorten lines longer than about 80 characters; very wide images become tiny on phones.
• Highlight the lines you talk about instead of explaining where to look.
• For images that also go into dark and light documents, a dark theme on a gradient works almost everywhere; for print, choose a light theme and a white or transparent background.

Limitations

• Fonts come from your device: the list shows which code fonts you have installed (others are marked “not installed”). Without a special code font the system monospace font is used.
• Up to 2,000 lines or 100,000 characters per image.
• Copy image works in current Chrome, Edge, Safari and Firefox; where the browser refuses, use Download PNG.
• Static images only: no animated or video export.
• Each language and theme is downloaded the first time you choose it, so switching to a new one needs a connection.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot. The syntax highlighter (Shiki, with a WebAssembly regex engine of about 470 KB) is downloaded from this site when the page opens, and each language grammar and theme the first time you pick it; your code is never uploaded.