Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
CodeSnap is the best default extension for most VS Code users. Select the code, run CodeSnap from the editor context menu or Command Palette, then save the image or copy it to your clipboard. It combines the broadest documented styling controls with line-number options, transparent backgrounds and window or container framing. Choose CodeSnap-Extended when highlighting individual lines is the main requirement, VSCodeSnap when gradient-heavy styling matters most, and Code Screenshot when you specifically need PNG, SVG or GIF output.
Quick comparison
| Extension | Best for | Capture and output | Notable controls or caveats |
|---|---|---|---|
| CodeSnap | General-purpose polished code images | Select code; launch from context menu or Command Palette; save to disk or copy to clipboard | Background, shadow, padding, rounded corners, window controls, title, line numbers, real line numbers, transparency, container/window target and save-versus-copy action. Linux clipboard needs xclip on X11 or wl-clipboard on Wayland. |
| CodeSnap-Extended | Tutorials, reviews and debugging explanations | Original CodeSnap-style workflow | Click a line number to cycle through focus, git-add, git-remove and no-highlight states. |
| VSCodeSnap | Style-first images and gradients | Selection-based capture with file or clipboard workflows | CSS backgrounds, gradients, shadows, padding, border radius, controls, titles, line-number modes, transparency and container/window targets. Its README acknowledges CodeSnap, Polacode, Ray.so and Carbon as inspirations; check current maintenance before standardizing on it. |
| Code Screenshot | PNG, SVG or GIF deliverables | Marketplace listing advertises PNG, SVG and GIF saving | Described as a maintained, faster successor to CodeSnap and Polacode with Carbon- and Ray.so-style images. Its listing discloses a random install ID, hashed machine ID, active-use seconds and two anonymous trial/telemetry events; review the current privacy terms before installing. |
How to install safely in VS Code
- Open View > Extensions or press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).
- Search the exact extension name and verify the publisher identifier:
adpyke.codesnap,RobertOstermann.vscode-codesnap-extended,luisllamas.vscodesnaporutiltools.code-screenshot-utiltools. - Open the Marketplace detail page and inspect the publisher, rating, download count, README, feature contributions, changelog and dependencies. Marketplace figures change, so treat them as current interface information rather than permanent statistics.
- Select Install. A recent VS Code release may ask you to confirm trust in a third-party publisher. Extensions run with the same permissions available to VS Code, so install only publishers you are willing to trust.
- For reproducible team builds, turn off automatic updates for the extension, install a specific version, or install a reviewed VSIX. Record the version alongside your documentation or build configuration.
CodeSnap: the best starting point
Capture a selection
- Open the file and select exactly the lines you want to show. A selection is usually better than capturing the entire editor because it removes unrelated code and keeps the image readable.
- Right-click the selection and choose the CodeSnap command, or open the Command Palette and run the CodeSnap capture command.
- In the preview, adjust the visual settings before exporting. You can change the background color, box shadow, container padding, rounded corners, window controls and window title.
- Choose whether the frame targets the code container or the entire window. Turn line numbers on or off; use real line numbers when the numbers should match the source file. Enable a transparent background when the image will be placed over another design.
- Use the configured shutter action to save the image, or click the image and use the clipboard shortcut to copy it. The README explicitly documents the click-then-copy workflow.
Settings that produce cleaner technical images
- Padding: add enough space around the code that text does not touch the frame; excessive padding wastes space in documentation.
- Window controls and title: keep them when you want a recognizable app-window treatment, remove them for compact diagrams or inline documentation.
- Real line numbers: use these for bug reports and tutorials where readers must locate the code in a file; disable numbering when the snippet is self-contained.
- Transparent background: useful for presentations and web layouts, but verify that your destination has sufficient contrast.
- Container versus window target: container capture focuses on the code card; window capture preserves more of the editor chrome.
CodeSnap-Extended: highlight the line that matters
CodeSnap-Extended keeps the original CodeSnap capture workflow and adds line-level emphasis. In its preview, click a line number repeatedly to cycle through four states: focus, git-add, git-remove and no highlight.
- Select the code and open the extension from the context menu or Command Palette.
- Click the number beside the key line once to apply focus highlighting.
- Click again to show a git-add state, again for git-remove, and again to return to no highlight.
- Use the remaining CodeSnap styling controls and export to a file or clipboard.
This model works well when an explanation refers to “the changed line” or when a review image must distinguish an addition from a removal. Avoid highlighting every line: emphasis is useful only when it creates a clear visual hierarchy.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
VSCodeSnap: choose it for gradients and visual polish
VSCodeSnap is the style-oriented alternative. Its documented controls include CSS backgrounds and gradients, box shadows, padding, window border radius, controls, titles, line-number modes, transparency, and container or window targets. The project credits CodeSnap, Polacode, Ray.so and Carbon for inspiration, so expect a similar code-card concept with more emphasis on background treatment.
#1 Best Overall
A practical style workflow
- Capture a small, meaningful selection rather than an entire file.
- Set a gradient or CSS background that keeps the syntax colors legible. Test both light and dark destinations if the image will be reused.
- Choose a border radius and shadow that separate the card from the page without making the code look like a decorative poster.
- Decide whether real line numbers, window controls and a title communicate useful context. Remove any control that does not help the reader.
- Check the extension’s current changelog and maintenance activity before adopting it for a long-lived documentation pipeline.
Code Screenshot: when the file format is the deciding factor
The Code Screenshot Marketplace result advertises PNG, SVG and GIF saving, plus Carbon- and Ray.so-style images inside VS Code. SVG is valuable when a diagram must remain sharp at any scale or be edited in Figma or Illustrator; PNG is the safest general web format, while GIF is appropriate only when an animated output is genuinely needed.
Privacy check before installation
The listing discloses collection of a random install ID, a hashed machine ID, active-use seconds and two anonymous usage events related to trial and telemetry. That disclosure does not by itself establish harmful behavior, but it is material information. Read the current Marketplace listing and privacy terms, then decide whether the telemetry fits your organization’s policy. If it does not, choose an extension whose disclosure and controls meet your requirements.
Copying to the clipboard, especially on Linux
Clipboard export is convenient for chat, issue trackers and documentation editors, but it depends on the operating system integration. CodeSnap documents two Linux prerequisites:
- X11: install
xclip. - Wayland: install
wl-clipboard.
If copying appears to do nothing, first confirm which session your desktop uses and install the matching utility. As a diagnostic, save the image to disk instead. A successful file export confirms that capture worked and isolates the problem to clipboard integration.
How to make consistently readable code screenshots
Prepare the source
- Remove unrelated imports, generated code and long lines that force tiny text.
- Keep the snippet focused on one idea. If context is required, include the smallest surrounding function or interface that makes the example understandable.
- Use real line numbers only when the reader needs to map the image back to a file.
Choose the frame deliberately
- Use a container target for documentation cards and social posts where the code should stand alone.
- Use a window target when the fact that the snippet came from VS Code is relevant.
- Use transparent backgrounds only when the receiving design controls the backdrop and contrast.
Export and verify
- Zoom the preview until punctuation, indentation and operators are clear at the intended display size.
- Open the saved file in the target documentation system. Some systems recompress images or remove transparency.
- For clipboard workflows, paste into a temporary image editor first and verify that the complete selection—not merely the visible portion—was copied.
Troubleshooting
The command does not appear
Confirm that the extension is enabled and that a text editor has an active selection. Reload the VS Code window from the Command Palette, then check the extension’s feature contributions and version. A workspace policy may also block third-party extensions.
The capture is blank or incomplete
Reduce the selection to a short snippet and retry. Very wide lines, unusual editor decorations or a stale preview can make the result look empty. Reloading the window and updating—or reverting to a known version—can distinguish a transient issue from a regression.
Clipboard copy fails on Linux
Install xclip for X11 or wl-clipboard for Wayland, then restart VS Code. Save to a file while diagnosing so you do not lose the capture.
Line numbers do not match the file
Enable real line numbers rather than generated snippet numbering. If the code was copied into a new scratch file, the numbers cannot represent its original location; include the filename or remove numbering.
The image looks attractive but is hard to read
Increase padding modestly, remove unnecessary window chrome, simplify the background and shorten the snippet. A gradient or shadow should separate the card from its page, not compete with syntax colors.
An update changes your output
Extensions can auto-update. Pin a tested version or install a reviewed VSIX when pixel-level consistency matters, and record the version used to generate existing documentation.
Or skip the browser setup: ScreenshotNeo
VS Code extensions are ideal for a developer’s selected snippet. For automated website captures, a browser-rendering setup is unnecessary with ScreenshotNeo, a website screenshot API and MCP server. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →The same service supports full-page captures with lazy images, CSS-selector element shots, dark mode, device presets or custom viewports, retina scale, PDFs, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits, request blocking, custom headers and cookies, user agents, Authorization, timezone and geolocation, transparent backgrounds, resizing, TTL-based caching, signed links, asynchronous webhooks, bulk capture for up to 100 URLs per call, a usage API and an OpenAPI specification. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
One-call examples
See the full parameter reference in the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan, and yearly billing gives two months free. Sign up free for ScreenshotNeo to try it without a card.
Frequently Asked Questions
Can I capture code without installing an extension?
Yes. VS Code can capture the editor through your operating system’s screenshot tools, but those tools generally lack code-card styling, selection-aware export and clipboard features documented by the extensions here.
Which extension should a team standardize on?
Use CodeSnap as the baseline, CodeSnap-Extended if line emphasis is a required convention, or VSCodeSnap if your documentation system depends on gradient styling. Pin and record the version you approve.
Is SVG always better than PNG for code?
No. SVG stays sharp and can be edited, but PNG has broader compatibility. Select the format that matches the publishing system and accessibility workflow.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
