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: Toggle line numbers for your code.
• Simple Mode: Quickly switch to a minimal layout without background padding.
• Custom Branding: Every snap includes a "Code Snap" watermark in the bottom right.
• Curated Backgrounds: Beautiful containers with customizable colors/gradients.
• Status Bar Button: Quick access to Snapshotter from the bottom bar.
• Fast & Lightweight: Built with performance in mind using html-to-image.

Getting Started

1. Select the code you want to capture in any editor window.
2. Right-click and select Code Snap: Open Snapshotter.
3. Adjust your view and click the Snap button to save as a PNG.

Configuration

You can customize Code Snap in your VS Code settings:

• codesnap.gradient: The CSS gradient for the background (e.g., linear-gradient(to right, #ffafbd, #ffc3a0)).
• codesnap.enableTilt: Toggle the 3D tilt effect on/off.
• codesnap.watermark: Set your custom watermark text.
• codesnap.showLanguage: Show or hide the language badge.
• codesnap.roundedCorners: Adjust the border radius of the snippet window.
• codesnap.boxShadow: Customize the shadow intensity and color.

Usage Tips

• Interactive Tilt: Move your mouse over the snippet in the webview to see the 3D effect.
• Edit on the fly: You can click inside the code area in the snapshotter to make quick edits before snapping!