Nifty Snap
Screenshot code in your own theme and font, with window frame, line numbers, highlighted lines and padding. Save as PNG or real SVG, or copy the image to the clipboard (works on Windows).
Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.
Features
- Looks like your editor. The code is coloured the way VS Code colours it: the same TextMate grammars, the rules of your current colour theme (including
editor.tokenColorCustomizations), bracket pair colours, and your editor font, size and line height. Switch themes and the preview follows.
- Take a screenshot. Select some lines and press
Ctrl+Alt+Shift+S (Cmd+Alt+Shift+S on macOS), right-click and choose Nifty Snap: Take Screenshot, or run it from the Command Palette. With nothing selected, the whole file is used. The preview follows your selection while it's open.
- Real line numbers, so lines 12–30 of
server.ts are numbered 12–30. Shared indentation is trimmed.
- Highlight lines by clicking them in the preview, or type ranges such as
3-5, 8.
- Frame, padding and background. An optional window frame with the file name, a soft shadow, a quiet flat background by default (other plain colours, a few soft gradients, transparent, or any colour), padding, and a fixed image width so a series of screenshots lines up.
- PNG at 1x, 2x or 3x, drawn from the vector image, so text stays sharp.
- SVG with real text: selectable, searchable and scalable, in colours any SVG editor reads.
- Copy to the clipboard with the Copy button,
Ctrl+C in the preview, or Copy Screenshot to Clipboard. It works on Windows, macOS and Linux (on Linux, copying from the Command Palette needs wl-copy or xclip). Paste into chat, a doc or an issue.
- Save to a folder you choose once. Saving starts in the folder you used last (or
nifty.snap.saveFolder), with names like server-12-30.png. Turn off nifty.snap.askWhereToSave to save with one click. Ctrl+S in the preview saves a PNG.
- Choices in the preview toolbar are remembered for next time; Reset goes back to your settings.
- Works in the browser on vscode.dev and github.dev. In remote windows (WSL, SSH, containers) it runs on your own computer, so copying works there too.
- Nothing leaves your computer: no network requests, no uploads.
Need a whole file on paper or as a PDF? Nifty Print prints code and saves it as PDF; Snap makes images of snippets to share.
Commands
| Command |
What it does |
Nifty Snap: Take Screenshot |
Open the preview for the selected lines (or the whole file) |
Nifty Snap: Copy Screenshot to Clipboard |
Copy the image as PNG |
Nifty Snap: Save Screenshot as PNG |
Save a PNG at the chosen scale |
Nifty Snap: Save Screenshot as SVG |
Save a vector SVG with real text |
Settings
| Setting |
Default |
What it does |
nifty.snap.frame |
true |
Window frame with three dots |
nifty.snap.title |
true |
File name in the frame |
nifty.snap.lineNumbers |
true |
Real line numbers |
nifty.snap.shadow |
true |
Soft shadow under the window |
nifty.snap.background |
mist |
mist, paper, graphite, theme, gradients mint, sky, lilac, sand, slate, none (transparent) or a CSS colour |
nifty.snap.padding |
32 |
Space around the window in pixels |
nifty.snap.width |
0 |
Image width in pixels; 0 fits the code |
nifty.snap.trimIndent |
true |
Remove shared indentation |
nifty.snap.scale |
2 |
PNG pixel density (1, 2 or 3) |
nifty.snap.saveFolder |
(empty) |
Folder to save in; empty means the last one used |
nifty.snap.askWhereToSave |
true |
Ask for a file name; off saves straight into the folder |
nifty.snap.followSelection |
true |
Update the preview when you select other code |
Known limitations
- Colours come from the TextMate grammars and your theme, plus bracket pair colours. Semantic highlighting (extra colours some language servers add, such as for read-only variables) isn't applied yet; it may come in a later version. The difference is usually small.
- The SVG names your editor font rather than embedding it; a viewer without that font shows another monospaced font.
- Up to 600 lines per picture. Long lines make the image wider instead of wrapping.
Credits
Syntax colouring uses vscode-textmate and vscode-oniguruma (MIT License), the engine VS Code itself uses.
Install
- VS Code: search for "Nifty Snap" in the Extensions view, or install from the Visual Studio Marketplace.
- Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.
Privacy
This extension collects no telemetry and needs no account.
- Nifty Code Metrics: Complexity & Hotspots: Complexity and size for every function in any language, as CodeLens and warnings, plus a hotspots view of the complex files that change most often. (Open VSX)
- Nifty Colors: Swatches & Picker in Every Language: Colour swatches and VS Code's picker in any file: CSS, Tailwind, Flutter, Swift, Android, C# and Unity colours. Convert formats and check WCAG contrast on hover. (Open VSX)
- Nifty CSS Variables: Custom Property IntelliSense: IntelliSense for CSS custom properties across your project: complete var(--…), see resolved values and colour swatches, go to definitions, catch undefined variables, and browse a colour palette. (Open VSX)
- Nifty Data Viewer: CSV & Parquet Viewer with SQL: Open CSV, Parquet and JSON files as a fast table and query them with SQL, powered by DuckDB. Sort, page through millions of rows, and export to CSV, Parquet or JSON. (Open VSX)
- Nifty Git Graph: Git History & Branch Graph: See your git history as a graph: branches, merges and tags, commit details and diffs, and checkout, merge, rebase, cherry-pick and more from a right-click. No sign-in. (Open VSX)
- Nifty Git Links: Open in GitHub, GitLab & Bitbucket: Open or copy links to files, lines, commits and pull requests on GitHub, GitLab, Bitbucket, Azure DevOps and Gitea. (Open VSX)
See all 100+ Nifty extensions and web tools at https://getnifty.dev
| |
