DEV Community

loading...
Cover image for Create Code screenshots straight from your IDE

Create Code screenshots straight from your IDE

antoine profile image Antoine Gagnon ・3 min read

What are you talking about?

You've seen them, sometimes on Twitter, sometimes on Medium post. They look something like this:

They're usually made with a website called Carbon which is really good looking, with a ton of design options, but it forces you to go to a different website, save, open the image again in your browser... what if you want to do things fast without going back and forth between Carbon, then your article, then your IDE every time?

Well, you can generate them in your IDE directly with Silicon!

How to install Silicon

Silicon is a command-line tool to generate images from files, clipboard content, stdin input.

You can follow directions here on how to install it on your system.

You can look at all the different configuration options for theming, to change the font, remove line numbers, controls, there's quite a lot of customization possible.

For now, we'll use the bare minimum and use a command that takes input from stdin and pushes the final image to the clipboard.
In my case, I am using Kotlin as my language, but of course, you'll have to change that to the language you want to use.

In my case the command will look like this:
image

It will echo the code I want inside of my image, then pipe it to the silicon command to be formatted in Kotlin and put inside the clipboard.

Set it up in your IDE

Now that we're able to create an image from code written straight inside the command line, let's integrate that with our IDE

Jetbrains IDE

I am mostly using this tool inside of Android Studio, but it will be able to work in pretty much any of Jetbrain's tools.

Setting up the external tools

Let's get started by going to Preferences → Tools → External Tools then let's add a new external tool to our setup.

Adding the command directly won't work with Android Studio as there are some issues with using the | pipe in external tools directly. To bypass it we'll configure our tool using bash -c to read a bash command from a string.

This is a simple workaround that will fix this issue.
So we put bash as our program, and the arguments will contain

-c "echo '$SelectedText$ ' | silicon -l kt -c "
Enter fullscreen mode Exit fullscreen mode

With this, we're using the macro $SelectedText$ to fetch the text selected inside Android Studio and use it as part of our command.

In the end, the command window should look something like that:
image

Now, whenever you have text selected inside Android Studio you can go to Tools → External Tools → Code to Image

But that's slow! Way too slow! So let's create a shortcut for it

Setup the shortcut

Let's open our preferences again by going to Preferences → Keymap then we can expand the External Tools section to find our custom tool.

Now we can right-click, Add keyboard shortcut and assign the one we want. In my case I chose ⌘ + I for "Image" (but mostly because that's the first letter that available)

Now you can simply select your code, press your shortcut and your image is ready to be pasted anywhere you want!

I hope you enjoyed this! If you find ways to add it in your favorite IDE, feel free to send them my way and I'll add them to the article.

Discussion (5)

pic
Editor guide
Collapse
pankajpatel profile image
Pankaj Patel

Thanks for writing about it @antoine

As @mangor1no said, I also use VSCode and there is extension
but I prefer to use the online tool carbon.now.sh As I can customize the screenshot on the need basis

Collapse
areknawo profile image
Arek Nawo

Nice alternative. Personally, I often use Polacode for VS Code. On a side note, I really don't like seeing screenshots in articles (especially visible on Medium as you've mentioned). They're fine in graphics and Tweets, but not in articles. Not being able to copy the actual code limits accessibility and ease of use.

Collapse
antoine profile image
Antoine Gagnon Author

I completely agree for things like tutorials where you have to copy-paste a lot of the code. But for something like an article on good practices for a specific technology or to showcase some specific features I think you’ll just be looking at code without really running it yourself.

Collapse
mangor1no profile image
Mangor1no

I'm using this extension on VSCode marketplace.visualstudio.com/items.... It's pretty similar to your solution :D Just select the code blocks and press to capture.

Collapse
antoine profile image
Antoine Gagnon Author

Super nice extension! Looks really good too!