How to Screenshot Code in VS Code

Short answer: Install CodeSnap from the Visual Studio Marketplace, select the lines you want in VS Code, open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS), and run CodeSnap. Adjust the preview width, then click the shutter to save the image. You can also open CodeSnap from the selection’s right-click menu. To copy the result instead of saving it, use the shortcut shown by the extension or set codesnap.shutterAction to copy.

This workflow creates a focused image of source code. A normal operating-system screenshot captures the entire VS Code window or desktop, including tabs, sidebars, terminals, and other context. Choose CodeSnap when the code itself is the deliverable; choose a system capture when the surrounding editor state matters.

1. Choose the right kind of screenshot

Before installing anything, decide what the reader needs to see.

Goal	Best method	Why
Share a clean snippet in a tutorial, issue, or presentation	CodeSnap	Exports selected source with deliberate framing and styling.
Show the file name, extensions, terminal, or debugger	System or window capture	Preserves the VS Code interface and surrounding context.
Show a very long file	Several CodeSnap images or a document export	A single tall image becomes difficult to read at normal display sizes.
Show a web page generated by your code	Browser screenshot service	Captures the rendered result rather than source text.

For a code-only image, select a manageable, self-contained fragment. Include enough surrounding lines to explain the example, but remove unrelated setup. Keep credentials, access tokens, customer data, and internal URLs out of the selection before exporting.

2. Install CodeSnap in VS Code

1. Open the Extensions view: Ctrl+Shift+X on Windows/Linux or ⇧⌘X on macOS.
2. Search for CodeSnap.
3. Inspect the publisher and listing details before installing. VS Code can show a third-party publisher trust prompt the first time you install an extension. Microsoft documents discovery, installation, configuration, and removal in its Extension Marketplace guide.
4. Select Install, then return to the editor.

Marketplace information changes over time. For alternatives, compare the current publisher, update date, compatibility, install count, rating, changelog, dependencies, and requested permissions. VSCodeSnap describes itself as a CodeSnap fork, while CodeSnap Extended documents line highlighting by clicking a line number. Treat those as options to inspect, not automatic recommendations.

3. Capture a code snippet

1. Open the source file and select the exact lines to export.
2. Open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
3. Search for CodeSnap and run the command. You can also right-click the selection and choose CodeSnap.
4. Use the preview width control to set a frame that keeps long lines readable without creating excessive empty space.
5. Click the shutter to save the image. To copy instead, click the image and use the copy shortcut shown by the extension, or configure the shutter action as described below.

The extension’s Marketplace listing documents the capture flow, save and copy behavior, line-number controls, and appearance settings. Keep the final image large enough that code remains legible when embedded in its destination.

4. Configure appearance and output

CodeSnap exposes settings for the visual treatment and the capture target. Names can vary slightly between releases, so search VS Code settings for codesnap if a key is not visible.

Setting area	What to decide	Practical use
Background color	Solid or transparent background	Use a solid color for predictable exports; transparent backgrounds can blend into a site or slide.
Shadow and padding	Depth around the code card	Moderate padding separates the snippet from its background without wasting space.
Rounded corners	Corner radius of the frame	Match the visual language of your documentation or presentation.
Window controls and title	Whether the image resembles an application window	Include them when you want a “window” motif; remove them for a compact code card.
Line numbers	Show, hide, or use actual source line numbers	Actual numbers help reviewers reference a file; hidden numbers maximize room for code.
Shutter action	Save or copy	Set codesnap.shutterAction to copy for a clipboard-first workflow.
Capture target	Selected code or the current editor content	Verify the target before exporting so unrelated lines are not included.

Use VS Code’s normal settings UI to change these values, or open Preferences: Open User Settings (JSON) and edit the CodeSnap keys exposed by your installed version. Keep a consistent preset for a documentation project so every image has the same spacing, background, and line-number policy.

5. Save, copy, and validate the image

After the shutter action completes, open the exported file and inspect it at the size where readers will see it. Check these items:

• Long lines are not clipped or forced into unreadably small text.
• Syntax colors have enough contrast against the selected background.
• Line numbers, if present, match the context you describe.
• No secrets, personal information, private hostnames, or proprietary code are visible.
• The image format and dimensions work for the destination (issue tracker, blog, slide, or chat).

If the image will be copied into a web page, PNG is usually a dependable choice for sharp text. If file size matters, test a compressed export while checking that characters remain crisp. Avoid repeatedly scaling a small raster image upward.

6. Reproducible settings and team workflows

For a one-off image, the UI is fastest. For a team, document a small capture standard:

1. Use the same VS Code theme and CodeSnap background.
2. Agree on whether line numbers and window controls appear.
3. Set a minimum readable text size for the final publishing surface.
4. Review every image for secrets before committing it to a repository or publishing it.
5. Keep the original source snippet near the image so the example can be updated when code changes.

VS Code profiles can help separate project-specific themes and extensions. Microsoft’s personalization documentation covers settings, themes, and shortcuts. Do not assume a teammate has identical fonts, themes, or extension versions; the exported image is the stable artifact.

7. Common problems and fixes

Problem	Likely cause	Fix
CodeSnap does not appear in the Command Palette	The extension is not installed, disabled, or still activating.	Check Extensions, enable CodeSnap, reload the VS Code window, and search again.
The context-menu command is missing	No text is selected or the menu is opened outside the editor.	Select source lines first, then right-click inside the editor.
The exported image contains the wrong lines	The capture target or selection changed before the preview opened.	Close the preview, select the intended range again, and verify the preview before saving.
Text is too small	The selection is too wide or the preview width is too large for its destination.	Shorten the snippet, increase the final display width, or split the example into multiple images.
Line numbers are absent or unexpected	A CodeSnap line-number setting is disabled or actual-number mode is selected.	Search settings for codesnap and choose the desired line-number mode.
Copy does nothing	The shutter is configured to save, or the browser/desktop clipboard is unavailable.	Set codesnap.shutterAction to copy, then try the platform shortcut shown by the extension.
Colors look different on another machine	The image was regenerated with a different theme or extension configuration.	Share the exported image itself and record the theme and CodeSnap appearance choices for future captures.
Install is blocked by trust concerns	VS Code is asking you to trust a third-party publisher.	Review the publisher, listing, update history, and permissions. Install only when the extension meets your project’s policy.

8. Performance, reliability, and maintenance

CodeSnap works on the local editor selection, so capture time is generally determined by the size of the snippet and the rendering work required for its styling. Very large selections increase image dimensions and make both saving and reviewing harder. Split large examples and keep a source-of-truth file in version control.

Extension behavior can change after updates. When a publishing workflow depends on exact output, pin the extension version where your organization’s policy allows it, or at least record the version used for a release. Recheck the Marketplace listing for compatibility and maintenance signals before upgrading. If a future update changes a setting name, use the extension’s current contribution settings and command descriptions rather than copying an old configuration blindly.

System screenshots have a different reliability profile: they include whatever is visible, including notifications or private tabs. Close unrelated panels and review the result before sharing. CodeSnap reduces that surface by exporting the selected code, but it cannot decide whether the selected text itself is safe to publish.

9. Or skip the browser setup

If the code is already published on a web page, documentation site, demo, or rendered example, ScreenshotNeo can capture that URL through one request. It is a website screenshot API, so it complements CodeSnap rather than replacing a local editor selection.

See the ScreenshotNeo API documentation for all parameters. A minimal request returns an image such as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));

ScreenshotNeo removes cookie or consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and whether the request was billed. You can also use full-page capture with lazy images loaded, CSS element selection, custom CSS and JavaScript, dark mode, device presets or any viewport, retina scale, waits, blocked requests, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage reporting, and PDF output.

The service includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. It offers 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Every plan includes every feature. Create an account at ScreenshotNeo’s free sign-up page.

10. FAQ

Can I screenshot code without installing an extension?

Yes. Use your operating system’s window or region capture tool when you need the VS Code interface. For a code-only image, CodeSnap is the documented extension workflow in this guide.

Does CodeSnap capture the whole file?

It is designed around selecting code and opening the capture UI. Select the exact range you want, then verify the preview before saving.

Can I include actual source line numbers?

Yes. CodeSnap exposes line-number controls, including an option for actual source line numbers. Check the current extension settings because names can change between releases.

What should I do with very long code?

Split it into related snippets, reduce unrelated context, and keep each image readable at its final display size.

Is ScreenshotNeo a replacement for CodeSnap?

No. CodeSnap captures a local VS Code selection. ScreenshotNeo captures rendered web pages, PDFs, and other URL-based content; it is useful after your code has been published or deployed.