CodeSnap addon for VSCode

Easily take beautiful, shareable screenshots of your code snippets right inside VS Code with the CodeSnap extension. A simple, step-by-step guide.

April 19, 2024 · 2 min read

View raw

Christophe

Markdown, WSL and Docker lover ~ Insatiable curious.

Cet article existe aussi en français — lire la version française.

This article is over a year old but was reviewed on July 30, 2026 — the content is still accurate.

This article is part of the VSCode - Tips, extensions and shortcuts series:

CodeSnap addon for VSCode

⚡

TL;DR

This article introduces the CodeSnap VSCode extension, which generates a nicely styled screenshot of selected code directly from the editor: run the CodeSnap command, select the lines to capture in the live preview, then save the resulting image.

The extension CodeSnap will take beautiful screenshots of your code in VS Code without effort.

Handy for social media, but not for a blog article: an image of code can't be copied, searched or indexed. For that, use a real code block — see A component for showing code snippets in a Docusaurus blog.

Open your file in VS Code, press CTRL-SHIFT-P and run CodeSnap. You just need to select lines now.

CodeSnap partial example

Result

That's what CodeSnap produces from a selection of PHP source code — a styled, shareable image:

Sample example for CodeSnap

As soon as you've called CodeSnap, a vertical preview window will appear.

In your source code, select one or more lines and CodeSnap will update the preview.

When you're done, just click on the Polaroid button just above the preview, save the image and it's done — that's the PHP example shown above.

Since these screenshots are meant to be shared, the font you use shows up in every one of them. If you haven't picked one deliberately yet, see Using the JetBrains Mono font in VSCode.

This article is part of the VSCode - Tips, extensions and shortcuts series: