Sharing beautiful code snippet screenshots

Have you ever wanted to quickly share a code snippet with someone and thought “I wish this code snippet was presented in a more code editor friendly way”? Well, I have. Fun fact, the hero image for this post was created a long time ago using this same technique.

This post is part of a series where I collect the most interesting tools that I use on my workflow.

Table of contents

1. The goal
2. The problem
3. The solution
   1. For VSCode
   2. On the web
4. Final thoughts

The goal

Sometimes when coding we end up creating some nice little snippets that can be helpful and help others on their own coding solutions. Sometimes it is just a helper utility type, other times it is a very uncommon css trick.

The problem

Most of the time, people are sharing code snippets on social media, which does not have a default code block parsing or markdown integration like GitHub Readme files. This creates a challenge of “how can I share this code in a format other than plain text”?

The solution

A simple search on the web would provide you with N sources for accomplishing this goal but I am going to share below my 2 favorites, one for when using it directly from VSCode and another if you want some more options and/or if you’re one of those who use nvim, intellij (or anything other than VSCode).

For VSCode

One of the things that keep me from moving away from VSCode is its extensions marketplace. There are so many interesting and unique extensions but today we are talking CodeSnap.

To take a screenshot of your code snippet is simple, install the extension, press CMD + SHIFT + P (on a mac) or CTRL + SHIFT + P (on windows and linux) to bring up the command pallete, type CodeSnap and hit enter. This should open code snap to the right side (as a preview) and by simply selecting the code you’d like to share with your mouse cursor the screenshot preview should be updated. When you’re ready, just click the CodeSnap icon on the preview and it is going to save to your local drive or right click and copy to clipboard.

Done, you’re ready to share a code snippet to your friends in a format that is not plain text.

Here is a sample so you can see the expected result:

On the web

If you’re looking to have a finer control over the screenshot, I recommend using Carbon. This tool allows you to fully customize the text highlight theme, background (you can even use an image if you’re really into the ricing of code snippets).

Here is a sample so you can see the expected result:

Final thoughts

There you have it, sharing code snippets doesn’t need to be boring, you can now, with very little effort, share beautiful code snippets to illustrate your work on social media and with friends.

Leave on the comments below which one did you prefer.

See ya! 👋