How To Record Your Terminal into a GIF

The Markdown language has become second nature among developers. The language allows you to document your code, with simple symbols that liven up a usually boring document. For example, if you want a title sized introduction in your readme.md file, just write ### in front, and the interpreter will make your title appear as a h1 size.

But even in the mainstream, markdown style is becoming more popular as a use for otherwise traditional media. For example, when a article is shared on Facebook, open-graph data, or the link preview is in the Markdown style. The flat black-matte styled font-face against a very neutral color makes the document easy to read and comprehend.

 

facebook markdown
The markdown-ish style of Facebook articles

With the advent of Github and the Readme.md’s (.md = markdown), a nicely formatted and pleasurable experience was brought to a field once ruled by Notepad and all caps. The markdown language has transformed “Readme” files into works of art, and now markdown artists just received a tool that  makes beautiful GIF’s to enhance their already beautiful markdown sheets.

A open-source package of software takes markdown to the next level, by recording terminal actions and compiling those actions into a high resolution GIF file.

The software, named “Terminalizer” is a great little package that takes care of all your inline markdown gif problems. Here is an example of the program in action.

Record terminal into gif
A quick example of navigation and file editing

The opensource software is hosted on Github and can be browsed by clicking the following link. But really, its so easy to install and use, you need not even navigate away from your browser.

Just watch the following terminal gif on how to install.

terminal gif
all you need is a working version of NPM, sudo access, and a -g flag

This plugin spices up even the most boring .md files into a simple, clean, and aesthetically pleasing, eye catching document.

While the software is plug-and-play, it also comes with the options for configurations. You can fine tune your recorded terminal, from the color and typeface, to the type of cursor and you can even add a watermark. Here is an example with the watermark option set. I will paste the configuration file below.

watermark terminalized
Watermarked Terminal

Here is the config file for using a watermark. And when you record the program, make sure you use the -c flag in order to override the default configuration.

# Specify a command to be executed
# like `/bin/bash -l`, `ls`, or any other commands
# the default is bash for Linux
# or powershell.exe for Windows
command: null

# Specify the current working directory path
# the default is the current working directory path
cwd: null

# Export additional ENV variables
env:
  recording: true

# Explicitly set the number of columns
# or use `auto` to take the current
# number of columns of your shell
cols: auto

# Explicitly set the number of rows
# or use `auto` to take the current
# number of rows of your shell
rows: auto

# Amount of times to repeat GIF
# If value is -1, play once
# If value is 0, loop indefinitely
# If value is a positive number, loop n times
repeat: 0

# Quality
# 1 - 100
quality: 100

# Delay between frames in ms
# If the value is `auto` use the actual recording delays
frameDelay: auto

# Maximum delay between frames in ms
# Ignored if the `frameDelay` isn't set to `auto`
# Set to `auto` to prevent limiting the max idle time
maxIdleTime: 2000

# The surrounding frame box
# The `type` can be null, window, floating, or solid`
# To hide the title use the value null
# Don't forget to add a backgroundColor style with a null as type
frameBox:
  type: floating
  title: Terminalizer
  style:
    border: 0px black solid
    # boxShadow: none
    # margin: 0px

# Add a watermark image to the rendered gif
# You need to specify an absolute path for
# the image on your machine or a url, and you can also
# add your own CSS styles
watermark:
  imagePath: /home/lordtyrion/elephant.png
  style:
    position: absolute
    right: 15px
    bottom: 15px
    width: 100px
    opacity: 2.9

# Cursor style can be one of
# `block`, `underline`, or `bar`
cursorStyle: block

# Font family
# You can use any font that is installed on your machine
# in CSS-like syntax
fontFamily: "Monaco, Lucida Console, Ubuntu Mono, Monospace"

# The size of the font
fontSize: 12

# The height of lines
lineHeight: 1

# The spacing between letters
letterSpacing: 0

# Theme
theme:
  background: "transparent"
  foreground: "#afafaf"
  cursor: "#c7c7c7"
  black: "#232628"
  red: "#fc4384"
  green: "#b3e33b"
  yellow: "#ffa727"
  blue: "#75dff2"
  magenta: "#ae89fe"
  cyan: "#708387"
  white: "#d5d5d0"
  brightBlack: "#626566"
  brightRed: "#ff7fac"
  brightGreen: "#c8ed71"
  brightYellow: "#ebdf86"
  brightBlue: "#75dff2"
  brightMagenta: "#ae89fe"
  brightCyan: "#b1c6ca"
  brightWhite: "#f9f9f4"

 

Happy Coding!

 

You Might Also Like

One Reply to “How To Record Your Terminal into a GIF”

  1. Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at mufasa.gq promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

Leave a Reply

Your email address will not be published. Required fields are marked *