6 Tools to Create Elegant Code Screenshots for Your Social Networks
Tags: javascript, webdev, programming, productivity
Published: 2022-05-18 12:17:58

Discover different tools to create code screenshots. All of them are free and available online or on VSCode.

After reading this article, you'll have no excuse for not creating content on your favorite social network! 😉

## 4 online tools to convert your code to image

The below tools allow you a set of customization functionalities to make your code snippets shine. We gathered a picture of their interface and an example of the output for each of them.

We let you play with the different configurations and find the one matching your needs the best.

### Snappify - Create beautiful code snippets with ease

[➡️ Open Snappify](https://snappify.io/)

![Snappify editor overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1652874517267/Aq2-hfHJw.png)

![Snappify code screenshot output](https://cdn.hashnode.com/res/hashnode/image/upload/v1652874482040/s1LvsKirq.png)

### Showcode - Create beautiful images of code.

[➡️ Open Showcode](https://showcode.app/)

![Showcode editor overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1652875037051/b0XKopSJF.png)

![Showcode code screenshot output](https://cdn.hashnode.com/res/hashnode/image/upload/v1652875026978/vzD8K-ahQ.png)

### Carbon - Create and share beautiful images of your source code

[➡️ Open Carbon](https://carbon.now.sh/)

![Carbon editor overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1652874778854/WoQKBh858.png)

![Carbon code screenshot output](https://cdn.hashnode.com/res/hashnode/image/upload/v1652874766050/_gWfLsUCV.png)

### Ray - Create beautiful images of your code

[➡️ Open Ray](https://ray.so/)

![Ray editor overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1652874903961/YjGpiJS80.png)

![Ray code screenshot output](https://cdn.hashnode.com/res/hashnode/image/upload/v1652874890598/MdQ3KmIkw.png)

## 2 VSCode extensions to generate code screenshots

If you like to stay in your code editor, these two extensions are for you.
They will allow you to highlight the code of your choice and generate a screenshot of it. 

### Polacode - Polaroid for your code

[➡️ Download Polacode on VSCode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

![Polacode overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1652875284423/TMsiTJqNH.png)

![Polacode code screenshot output](https://cdn.hashnode.com/res/hashnode/image/upload/v1652875296804/clh2RdUtE.png)

### CodeSnap - Take beautiful screenshots of your code

[➡️ Download CodeSnap on VSCode](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

![CodeSnap overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1652875228489/e3nGZXAbe.png)

![CodeSnap code screenshot output](https://cdn.hashnode.com/res/hashnode/image/upload/v1652875211148/2q6jib80R.png)

## Do you know any others?

We hope you find this article helpful! If you know some other tools, [let us know on Twitter](https://twitter.com/FlycodeHQ).

**If you want to discover a brand new tool to manage your product translations outside of your code ➡️ [visit our website](https://www.flycode.com/).**