Code Snap

Take stunning, premium screenshots of your code with beautiful backgrounds, custom branding, and toggleable window controls.

Features

• Window Controls: Toggle macOS-style window controls on your snippet.
• Line Numbers: Real line numbers that reflect the actual lines you selected.
• Simple Mode: Quickly switch to a minimal layout without background padding.
• Custom Branding: Every snap includes a "Code Snap" watermark in the bottom right (toggleable).
• Advanced Settings Panel: Themes, colors, shadows, fonts, spacing, gradients and export controls.
• Syntax Highlighting: Offline, built-in highlighter covering 15+ languages.
• Editable Code: Edit the code right in the snapshot before snapping.
• Copy to Clipboard: Copy the PNG straight to your system clipboard (Windows).
• Multiple Export Formats: PNG, JPEG, SVG and WebP at 1x-4x resolution.
• Transparent Background: Export the snippet with a transparent backdrop.
• Theme Presets: One Dark, GitHub Dark, Dracula, Monokai, Solarized Dark, Nord and Light.
• Status Bar Button: Quick access from the bottom bar.
• 3D Tilt Effect: Interactive perspective tilt on hover.

Getting Started

1. Select the code you want to capture in any editor window.
2. Right-click and select Code Snap (or use the status-bar button / command palette).
3. Adjust your view, open the Advanced panel to fine-tune, then click Save As... or Copy.

Configuration

You can customize Code Snap in your VS Code settings (codesnap.*):

• codesnap.gradient: CSS gradient for the background.
• codesnap.enableTilt: Toggle the 3D tilt effect.
• codesnap.watermark: Set your custom watermark text.
• codesnap.watermarkEnabled: Show/hide the watermark.
• codesnap.showLanguage: Show the language badge in the window title.
• codesnap.roundedCorners: Border radius of the snippet window.
• codesnap.boxShadow: Shadow style for the snippet.
• codesnap.fontSize: Font size of the code.
• codesnap.fontFamily: Font family for the code.
• codesnap.lineHeight: Line height of the code.
• codesnap.padding: Background padding around the snippet.
• codesnap.backgroundColor: Fallback background color.
• codesnap.textColor: Default text color.
• codesnap.headerBackground: Window title-bar background.
• codesnap.codeBackground: Code window background.
• codesnap.shadowEnabled: Show/hide the drop shadow.
• codesnap.showLineNumbers: Show line numbers by default.
• codesnap.showWindowControls: Show the window controls by default.
• codesnap.transparentBackground: Export with a transparent background.
• codesnap.pixelRatio: Export resolution scale (1x-4x).
• codesnap.exportFormat: Default export format (png/jpeg/svg/webp).
• codesnap.theme: Syntax theme preset (empty = custom).

Export Formats

• PNG — lossless, supports transparency.
• JPEG — smaller files, no transparency (transparent becomes white).
• SVG — vector, infinitely scalable.
• WebP — modern compressed format.

Development

The extension is plain CommonJS — no build step required.

• src/extension.js — VS Code extension host logic.
• src/util.js — small file-writing helper.
• webview/main.js — webview UI logic.
• webview/highlighter.js — offline syntax highlighter.
• webview/main.css — webview styles.

Notes for contributors

• The localResourceRoots allow access to webview/ and the extension root.
• The image-capture library (html-to-image) is loaded from a CDN at runtime; the syntax highlighter is bundled locally so highlighting works offline.