Take Beautiful Screenshots of Your Code in VS Code

Impress your audiences and Improve Understandability

Photo by Roman Synkevych 🇺🇦 on Unsplash

Sharing your code with beautiful screenshots can impress your audiences and improve understandability. This article curates two VS Code extensions to help you create a beautiful screenshot of your code. If you use VS Code to code your program, it is very easy to use an extension to take a screenshot of your code with your selected color theme, supporting all programming languages which VS Code does.

This is an example from one of my scripts from another Python article.

From This (Default Code Snippet in Medium): 😒

def main():
   df = pd.read_html('https://www.stuttgart-airport.com/security-wait-times/')
   df = df[0] # Get First table
   df['Wait times'] = df['Wait times'].str.replace(r'\D', '')
   df['Wait times'] = pd.to_numeric(df['Wait times'], errors='coerce').astype('float')
   df = df.set_index('Terminal').T

Into This: 👌

Looks much better, right?

Let’s get started!

CodeSnap

(300K+ Installed)
So far, the CodeSnap extension is my favorite tool to create a screenshot with its simplicity. After installation, you can just drag to select your code where you want a screenshot, right-click to open the CodeSnap menu, and click a button to generate a screenshot and save it as PNG locally.

Link to installation:

CodeSnap - Visual Studio Marketplace

Basic use of CodeSnap extension

Create a Screenshot with CodeSnap Extension.

• Selecting Part of Your Code to Screenshot
• Right-clicking