Create Code screenshots straight from your IDE
Tags: android, jetbrains, carbon, ide
Published: 2021-03-03 03:11:03

# What are you talking about?
You've seen them, sometimes on Twitter, sometimes on Medium post. They look something like this:
<p align="center"">
   <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf4snms5h4iz5hywfy16.png" width="70%" />
</p> 
 
They're usually made with a website called [Carbon](https://carbon.now.sh/) 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](https://github.com/Aloxaf/silicon#install) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nba75stwyks0z1y1411.png)
 
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 "
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swd5ybrru0lnoj1q1k9l.png)

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.