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.
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.
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.
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.
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"