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:

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:

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.