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!
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.
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.
Now that we're able to create an image from code written straight inside the command line, let's integrate that with our 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.
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.
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
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.