How to Take Screenshot of Code Like a Pro

I’m sure every one of you has shared code by taking screenshots. We often have to ask about an error in the code from our friends or sometimes we ask questions about our code in facebook groups. People share simple screenshots using snipping tools and even taking pictures from mobile phones. You might have noticed that when you share a screenshot on whatsapp or facebook it doesn’t look good because they always compress the image using different algorithms. This results in a bad-quality image.

You can use a VS Code extension to share a best-looking coding screenshot with few steps. Here are all the steps you have to do.

Step 1. Download and Install the CodeSnap  VS Code Extension.

Step 2. Open CodeSnap Extension.

Step 3. Take a screenshot of the code using the extension.

Step 4. Save the screenshot on your machine.

Download The CodeSnap VS Code Extension

Now, let’s take a closer look at each step. First, you have to download the CodeSnap extension from VS Code Market Place. This can be done using the VS Code editor. Open VS Code and click on extensions as shown below.

Take a coding screenshot 1

Open the CodeSnap Extension

After installing the extension just open it with “Crtl+Shift+P” or “Command+Shift+P” depending on your operating system. See the screenshot below.

Take a coding screenshot 2

Take a screenshot of the code

After clicking the extension name it will open a new tab inside your text editor. Now, all you have to do is to select the code you want to take a screenshot of. See the example below.

Take a coding screenshot 3

You can do the same thing without opening the extension. Just select the code and right-click on it. It will open menus and you have to click on “CodeSnap”. See the image below.

Take a coding screenshot 4

Save the Screenshot

The last step is to save the screenshot on your computer. Click on the icon you have on the CodeSnap extension tab and select the path where you want to save it. See the screenshot below to know which icon you have to click.

Take a coding screenshot 5

That’s how you can take screenshots of your code like a pro. I have attached a sample screenshot I took using the same extension. You can check the quality of the image and also how neatly it was captured.

Coding Screenshot Sample


Sharing your code as an image is as simple as saving a file. All you need to do is to use the CodeSnap VS Code extension and let it do the magic for you. You can share every image of your code without losing quality and indentation in the code.

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here