How to take a screenshot in VSCode with a custom background:
VSCode has a huge collection of extensions. Previously I was using carbon to create code-screenshots. This works great and also these are pretty small in size.
But, if you don’t want to go to a website and if you want to take it directly in your code editor, you can use one extension called CodeSnap.
Install the extension:
Search and download codesnap from the extensions tab of VSCode.
It provides a couple of useful features like:
- Select your code and take a screenshot
- Show line numbers to your code
- Copy the screenshot or save it to a folder
- Add rounded corner
- Customize the background color
- Add transparent background to the code.
How to use it:
- You can select a code snippet and right click on it to get an option for codesnap
- Or, you can open the Command palette and search for Codesnap. Use Ctrl + Shift + P on windows and linux or Cmd + Shift + P on OSX to open it.
- You can also bind a hotkey to codesnap.start to start it quickly.
It uses the current theme of VSCode to create the snapshot.
It looks as like below:
You can click on the settings button in the extension page and click on Extension settings to edit other settings provided by this extension.
Let’s try to create a snapshot for the below C Hello World code snippet:
printf("Hello World !!");
The only drawback I found is its size. For codesnap, the above program creates a 50+KB image and for carbon, it is only 22KB. Other than that, it provides a really quick way to take a code-screenshot.