DEV Community

Cover image for Screenshot your code with CodeSnap - Top VS Code Extensions - CodeSnap.
ishrat
ishrat

Posted on • Edited on

Screenshot your code with CodeSnap - Top VS Code Extensions - CodeSnap.

Need to take a screenshot of your code? It's Easy with CodeSnap.

Take beautiful screenshots with CodeSnap.

A snapshot of your code is required. It's simple to do with CodeSnap, and it looks beautiful. To add snippets to your blog, Slack channel, documentation, and other places, save or copy them. To ensure you receive what you need, we'll review customization options and how to use them.

You can resize, add padding, change the box shadow and background color, and do many more customization with CodeSnap. Also, change the Theme.

Features

Quickly capture and copy code screenshots with line numbers and customizable settings.

code screenshot

Codesnap makes it easy to add beautiful screenshots to your blog, Slack channel, or documentation.

How to use :

  1. Install the CodeSnap extension and refer to its documentation for details.

  2. Pres " CTRL + SHIFT + P " and select the Codesnap, which will open a new tab for you.

Or you can right-click and select the Codesnap option. And it will do the same.

  1. Now, you can select the part you want to take the pictures.

  2. The best part of this is the clear view of the code when it's presented in a line format, and it's pretty styled.

  3. Now, you can press "CTRL + C" to save the image, or you can just click on the Codesnap icon.

  4. To customize the image's background, you can go to the settings and type Codesnap, and you will see many Options to customize. The background color, box shadow, or you can also hide the line numbers if you want.

codesanp

Click Here to Download

Screenshot your code with CodeSnap

Top comments (6)

Collapse
 
meer profile image
Meer

Great!

I used to think that somebody made such type of screenshots manually with Canva or something.

Tried it, very satisfying to capture a screenshot of the code with it.

Really Awesome!

Thanks for sharing!

Collapse
 
pinky057 profile image
ishrat

Glad to hear that. :)

Collapse
 
wraith profile image
Jake Lundberg

This looks like a great little tool! I will definitely give it a go! thanks for sharing!

Collapse
 
pinky057 profile image
ishrat

My pleasure <3 .

Collapse
 
tomri profile image
Thamarai Selvan

For vim users!
We don't need a tool or something to take "beautiful screenshots". Just capture the whole window, you'll get a beautiful code screenshot with the most beautiful UI (but not with nvchad, it sucks, don't use it). so that you can flex πŸ’ͺ whenever you share it.
Vim supremacy

Disclaimer: I don't have any disrespect for nvchad, I just tried to say "build your own nvim", in a funny way

Collapse
 
pinky057 profile image
ishrat

It's just the basis of the preferences, most people enjoy using vscode, so that's for them. And thanks for your opinion!