Turn your code into beautiful images.
A simple and powerful Visual Studio Code extension for creating clean, customizable code screenshots — directly from your editor.
Install AstroCode · View on GitHub
AstroCode is a Visual Studio Code extension that lets you transform selected code into clean, polished and customizable images.
Instead of taking a screenshot of your entire editor, cropping it manually and trying to make it look good, AstroCode gives you a dedicated interface for creating code captures.
Select your code. Customize the design. Export the result.
Everything happens directly inside Visual Studio Code.
- 🐦 Social media and developer communities
- 📚 Documentation
- 📝 GitHub README files
- 🎓 Tutorials and educational content
- 💼 Portfolios and presentations
- 🖥️ Technical articles
- 📸 Sharing code with other developers
Your code deserves more than a basic screenshot.
AstroCode is built around a simple idea:
Make sharing code as easy as writing it.
There is no need to copy your code into an external website, open an image editor, crop screenshots manually or spend time fixing the appearance.
AstroCode gives you the tools to create a professional-looking code image without leaving your editor.
AstroCode uses Shiki for accurate and high-quality syntax highlighting.
Your code maintains a familiar developer-friendly appearance while looking polished in the final image.
Choose from a selection of popular themes designed to make your code look great.
Currently available themes include:
- Dracula
- GitHub Dark
- Nord
- Tokyo Night
- Catppuccin Mocha
- Rosé Pine
- Vitesse Light
Make your capture fit your style.
Customize:
- Corner radius
- Padding
- Font size
- Shadows
- Window title
- Syntax theme
You can adjust the appearance before exporting and see how your capture looks.
Create the right image for the right platform without configuring everything from scratch.
Designed for sharing code on social media.
Perfect for adding polished code images to your projects and documentation.
Create high-quality captures suitable for presentations, articles and other professional content.
Export your captures as high-resolution PNG images.
Your code stays sharp, readable and ready to share.
AstroCode is designed to work as part of your existing development workflow.
You don't need to:
- Open another application
- Upload your code to a website
- Copy and paste your code elsewhere
- Manually crop screenshots
- Use an external image editor
Your code stays in Visual Studio Code from start to finish.
Creating a capture with AstroCode only takes a few seconds.
This step is important.
First, select/highlight the exact piece of code you want AstroCode to capture inside the Visual Studio Code editor.
For example, you can select:
function helloWorld() {
console.log("Hello, world!");
}AstroCode will use the code you have selected as the content of your image.
You must select your code before running the AstroCode command.
Once your code is selected, open the Visual Studio Code Command Palette.
On Windows/Linux:
Ctrl + Shift + P
On macOS:
Cmd + Shift + P
With your code still selected, search for:
AstroCode: Capture Selection
Then press Enter.
AstroCode will open its capture interface using the code you selected in step 1.
Now you can customize how your code image looks.
Choose your preferred theme and adjust options such as:
- Font size
- Padding
- Corner radius
- Shadows
- Window title
Experiment with the settings until your capture looks the way you want.
When you're happy with the result, export your capture as a high-quality PNG.
That's it.
Your code is ready to share.
AstroCode supports 40+ programming and markup languages.
| Language | Language | Language | Language |
|---|---|---|---|
| JavaScript | TypeScript | Python | Rust |
| Go | PHP | Ruby | Swift |
| Kotlin | Dart | C# | Java |
| SQL | YAML | CSS | HTML |
| Markdown | JSX | TSX | JSON |
| Bash | C | C++ | And more |
Syntax highlighting is powered by Shiki, providing accurate highlighting across a wide range of supported languages.
The easiest way to install AstroCode is directly from the Visual Studio Marketplace.
Or install it directly from Visual Studio Code:
- Open Visual Studio Code.
- Open the Extensions panel.
- Search for AstroCode.
- Select AstroCode.
- Click Install.
Once installed, AstroCode is ready to use.
Install AstroCode from the Visual Studio Marketplace
AstroCode is designed to run directly inside Visual Studio Code.
Make sure you have a supported version of Visual Studio Code installed before installing the extension.
| Resource | Link |
|---|---|
| 🧩 Visual Studio Marketplace | Install AstroCode |
| 💻 GitHub Repository | GKPROEJECT/astrocode |
| 🐛 Issues & Feedback | Report an issue |
AstroCode is open source and contributions are welcome.
If you find a bug, have an idea or want to improve the project, feel free to open an issue or submit a pull request.
Before submitting a contribution, please make sure your changes are tested and clearly documented.
If AstroCode helps you create better code content, consider giving the project a ⭐ on GitHub.
It helps more developers discover AstroCode and supports the continued development of the project.
AstroCode is released under the MIT License.
See LICENSE for the complete license.
Beautiful code. Simple workflow. One extension.
Made with ❤️ for developers.