CodeSnap Studio v2.1.0 🎨
Take stunning, professional screenshots of your code in VS Code with advanced customization options, AI-powered enhancements, and multiple export formats!
🚀 Enhanced Features v2.1.0:
- 25+ Beautiful Background Palettes: Including Midnight, Sunset, Ocean, Forest Dark, Neon, Aurora, Candy, Cyber, Galaxy, and more
- Multiple Export Formats: PNG, JPG, SVG, and PDF with quality control
- AI-Powered Code Enhancement: Use AI to enhance, summarize, and improve your code snippets
- Batch Export: Export to all formats at once with one click
- Custom Syntax Highlighting: Customize colors for keywords, strings, comments, numbers, functions, variables, and types
- Preset Themes: Apply coordinated themes like GitHub Dark, Monokai, Dracula, Nord, One Dark, and more
- Custom Gradients: Create your own gradient backgrounds with up to 3 colors and different directions
- Watermark Support: Add custom text watermarks to your screenshots
- Custom Fonts: Use any font family for your code
- Keyboard Shortcuts: Ctrl+S to save, Ctrl+C to copy
- Reset Button: Quickly reset zoom and highlights
- Advanced Line Highlighting: Click lines to highlight in blue, green (+), or red (-)
- Professional UI: Enhanced interface with better controls and new AI features
- High-Quality Output: Configurable image quality and scaling
- Improved Paste Handling: Better clipboard integration for syntax highlighting
- Bug Fixes: Fixed PDF export, overflow issues, and syntax highlighting
Installation
- Install from VS Code extensions panel by searching for "CodeSnap Studio"
- Or install from terminal:
ext install SecureDev.codesnapstudio
- Latest Version: v2.1.0 with bug fixes and improved features
✨ Features
- 25+ Beautiful Background Themes: From classic gradients to modern dark themes including Aurora, Candy, Cyber, Galaxy
- Multiple Export Formats: PNG, JPG, SVG, and PDF with adjustable quality
- AI-Powered Features: Enhance code with AI, generate summaries, and get improvement suggestions
- Batch Export: Export your snippet to all formats simultaneously
- Custom Syntax Highlighting: Customize colors for keywords, strings, comments, numbers, functions, variables, and types
- Preset Themes: Apply professional themes like GitHub Dark, Monokai, Dracula, Nord, One Dark, Solarized Dark
- Custom Gradients: Create custom gradient backgrounds with 1-3 colors and horizontal/vertical/diagonal/radial directions
- Watermark Support: Add custom text watermarks
- Custom Fonts: Use any font for your code display
- Keyboard Shortcuts: Ctrl+S (Save), Ctrl+C (Copy)
- Interactive Line Highlighting: Click lines for blue, green (+), or red (-) highlights
- Zoom Control: Adjustable preview zoom
- Professional UI: Clean interface with save, copy, reset, and new AI buttons
- Window Customization: Multiple window styles and controls
- High-Resolution Output: 2x scaling for crisp screenshots
- Improved Code Handling: Better long line wrapping and overflow prevention
📖 Usage Instructions
- Open the command palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS) and search for
CodeSnap Studio.
- Select the code you'd like to screenshot.
- Use the controls to:
- Adjust zoom with the slider
- Add line highlights by clicking lines
- Change background palettes with 🎭 Background
- Apply preset themes with 🎭 Themes
- Customize syntax colors with 🎨 Syntax
- Use AI features: Enhance, Summarize, or Improve code
- Choose export format: PNG, JPG, SVG, or PDF
- Click Save to export, Copy to clipboard, or 📦 Batch Export for all formats
- Use Reset to clear highlights and reset zoom
Tips:
- Keyboard Shortcuts: Ctrl+S to save, Ctrl+C to copy
- Line Highlighting: Click any line to cycle through highlight modes (blue, green +, red -)
- Right-click Context Menu: Access CodeSnap Studio directly from selected code
- AI Features: Use AI Enhance to improve code formatting, AI Summary for code explanations, AI Improve for suggestions
- Batch Export: Export to all formats at once for maximum compatibility
- Custom Settings: Configure themes, fonts, watermarks, syntax colors, and export options in VS Code settings
⚙️ Configuration
CodeSnap Studio offers extensive customization options. Configure these in your VS Code settings:
codesnapstudio.backgroundPalette: Choose from 25+ beautiful background themes including Aurora, Candy, Cyber, Galaxy, Midnight, Sunset, Ocean, Forest Dark, and Neon.
codesnapstudio.containerBackground: Custom background when using 'custom' palette. Supports any CSS background including gradients.
codesnapstudio.customGradientColor1: First color for custom gradients.
codesnapstudio.customGradientColor2: Second color for custom gradients.
codesnapstudio.customGradientColor3: Third color for custom gradients (optional).
codesnapstudio.customGradientDirection: Direction for custom gradients: horizontal, vertical, diagonal, or radial.
codesnapstudio.presetTheme: Apply preset themes: none, github-dark, github-light, monokai, dracula, solarized-dark, nord, one-dark.
codesnapstudio.boxShadow: CSS box-shadow for the snippet container.
codesnapstudio.transparentBackground: Enable transparent background for screenshots.
codesnapstudio.target: Choose 'container' (with background) or 'window' (code only).
codesnapstudio.containerPadding: Padding around the code snippet.
codesnapstudio.windowBorderRadius: Rounded corners for the window.
codesnapstudio.showWindowTitle: Display window title bar.
codesnapstudio.windowControlStyle: Window button style: Windows, OS X, Gray dots, or None.
codesnapstudio.windowTitleStyle: Title display: Workspace + Filename, Filename, Custom, or None.
codesnapstudio.windowTitleCustomStyle: Custom title text.
codesnapstudio.showLineNumbers: Show/hide line numbers.
codesnapstudio.realLineNumbers: Use actual file line numbers.
codesnapstudio.trimEmptyLines: Remove empty lines from start/end.
codesnapstudio.exportFormat: Export format: PNG, JPG, SVG, or PDF.
codesnapstudio.imageQuality: Image quality for JPG exports (0.1 to 1.0).
codesnapstudio.watermarkText: Text watermark for screenshots.
codesnapstudio.customFont: Custom font family for code display.
codesnapstudio.customSyntaxColors: Enable custom syntax highlighting colors.
codesnapstudio.syntaxKeywordColor: Color for keywords.
codesnapstudio.syntaxStringColor: Color for strings.
codesnapstudio.syntaxCommentColor: Color for comments.
codesnapstudio.syntaxNumberColor: Color for numbers.
codesnapstudio.syntaxFunctionColor: Color for function names.
codesnapstudio.syntaxVariableColor: Color for variables.
codesnapstudio.syntaxTypeColor: Color for types and classes.
📋 Changelog
v2.1.0
- ✅ Fixed PDF export functionality
- ✅ Fixed syntax highlighting issues
- ✅ Fixed code overflow and wrapping problems
- ✅ Improved clipboard handling with modern Clipboard API
- ✅ Added word-break for long code lines
- ✅ Enhanced paste mechanism for better code display
v2.0.0
- ✨ Added AI-powered code enhancement, summarization, and improvement
- ✨ Added batch export to all formats simultaneously
- ✨ Added SVG and PDF export formats
- ✨ Added custom syntax highlighting colors
- ✨ Added preset themes (GitHub Dark, Monokai, Dracula, Nord, One Dark, etc.)
- ✨ Added custom gradient backgrounds with multiple directions
- ✨ Expanded background palettes to 25+ options
- ✨ Improved UI with new controls and professional design
Examples
Material Theme + Operator Mono
Nord + Cascadia Code
Monokai + Fira Code
Acknowledgements
The great CodeSnap, for it great extension.
The great Polacode, for the initial concept.
Ray.so for some design inspiration.
Carbon for some design inspiration.
Connect with Me
