Language: EN

vscodesnap

VSCodeSnap, create images of your code

I share a new Open Source extension for Visual Studio Code that allows us to generate colorful images of our code.

Nowadays, generating eye-catching images of our code is a common necessity. For example, it is useful to share them on social networks, or incorporate them into a project’s documentation.

An example of this is the increasing popularity of online services such as the well-known Carbon or Ray.so.

There are also extensions for Visual Studio Code that allow us to perform the same procedure. Being able to generate the images directly from VSCode is much more convenient and faster.

Among the available options, possibly the best one is the CodeSnap extension. This, in turn, is based on another very popular extension called Polacode.

Unfortunately, the development of CodeSnap is not active. At the time of writing this post, the last update was 17 months ago, it has 9 pending PRs, and 58 unclosed issues.

vscode-snap-example1 So I have created VSCodeSnap, which adds various improvements, such as:

  • Background gradient
  • Predefined palettes
  • Line highlighting with three modes (|, + and -)
  • More types of controls (None, Mac OS, Gray Dot, and Windows)
  • Zoom
  • Button bar with copy and save.
  • Others…

You can find VSCodeSnap in the Visual Studio Code extension palette, to install and update it comfortably.

vscode-snap-extension

Of course, VSCodeSnap is Open Source and all the code is available on Github, where you also have detailed instructions and more examples of VSCodeSnap.

Download the code

All the code in this post is available for download on Github. github-full