Photo by Markus Spiske on Unsplash

How to Spice Up Your Medium Article with Recorded Terminal Gifs

This is a step by step guide to adding your very own coding terminal gifs to your Medium articles. I have MacOS with Homebrew installed, so that will be what this demo incapsulates. You can visit asciinema for your own installation needs.

Installations

These are the following installations you will need to run.

• brew install asciinema
• brew install asciicast2gif

Now, you may need to install the following items as well, but they also may already be ready to go.

• brew install imagemagick

NOTE: Imagemagick is dependent upon Ghostscript fonts, so you may need to add that install to the pile, brew install ghostscript

• brew install gifsicle

Homebrew Error: <software package> is already installed.

> brew list <software package> || brew install <software package>

NOTE: Nothing to worry about, but if you are installing items and Homebrew is saying that the software package is already installed you will receive an error. Similar to the one on the left.

NOTE: If you don’t like error messages (BUT you better get used to ’em) you can run a different command shown here to the left. Basically this will check to see if the item is installed, and if it isn’t, it will install the package.

Creating a Recorded Terminal Session

After all that, we are ready to record!

To be honest, the hardest part of this whole process was getting everything installed correctly. I had a few bugs with ImageMagick that I had to google and solve on my own (and you may to), but after all was said and done recording and creating gifs was easy with all these different packages.

• asciinema rec <name_of_file>.cast

Upon entering the above command your screencast will begin. In my opinion, the above command is the best way to save your screencast locally. There is also a way to screencast and save it to your profile on asciinema.org, but I found it far more convenient to do it this way. It will continue to record all the actions within the terminal until you input Ctrl + d or entering exit . (All shown below)

Screencast example using asciinema

Creating a Gif

Now that you have your .cast file saved, it’s just a simple command to change it into a .gif .

• asciicast2gif <name_of_file>.cast <name_of_file>.gif

That’s it! Your gif is created.

WE DID IT!

There are also a few customization options on how you want to export your .cast file to .gif .

Customization of creating .gif

asciicast2gif [-t theme] [-s speed] [-S scale] [-w cols] [-h rows] <input-path-or-url> <output-gif-path>

And here is a brief description of what these commands do.

-t <theme>        color theme, one of: asciinema, tango, solarized-dark, solarized-light, monokai (default: asciinema)
-s <speed>        animation speed (default: 1)
-S <scale>        image scale / pixel density (default: 2)
-w <columns>      clip terminal to specified number of columns (width)
-h <rows>         clip terminal to specified number of rows (height)

And that’s how it’s done 😊

References

• Homebrew
• asciinema
• asciicast2gif
• ImageMagick
• ghostscript
• gifsicle