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.
Top comments (5)
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
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.
Super nice extension! Looks really good too!
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.
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.