Gem for Jekyll to render nice terminals.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Join the chat at

This Gem adds a liquid block to Jekyll-powered sites for showing shell commands in a nice way. The rendering uses only CSS, generated as a site page, which makes it easily tweakable.

Gem Version Build status

Basic use

First, add the plugin to your jekyll site, by putting the following lines in your _config.yml file inside the generaged jekyll directory.

  - jekyll-terminal

Then, add the following tag inside your _includes/head.html layout, next to the existing stylesheets tags.

{% terminal_stylesheet %}    

Then, in any posts, simply wrap shell instructions inside a terminal block:

{% terminal %}
$ echo "Hello world!"
Hello world
$ date
Sun Dec 14 09:56:26 CET 2014
{% endterminal %}

It will get rendered nicely, with a drop shadow, as shown on snapshot below:

Download the self-contained sample.html file in this repository to see how it is rendered in your favorite browser. Or check an online rendering.

Advanced use

Lines starting with $ are considered commands and will be rendered as such. If you need a command on multiple line, like an here document, start the line with a slash:

{% terminal %}
$ cat <<END
/This will disappear in void
{% endterminal %}

Anyother line (not starting with $ or /) will be considered output. In the rendered HTML, output lines are marked as non user selectable (a feature supported by some browsers). Similarly, command lines are rendered with the $ added via CSS. As a result, it is very easy for your viewers to copy/paste a list of commands from your page to their terminal.


The following variables can be specified in the _config.yml file of your jekyll site. The values shown are the default values:

  tag_name: 'h3'  # the tag used for the Terminal's title
  continuation_string: '/' # lines starting with this continue the previous $ line_

The continuation_str solves the #4 issue, where the output of a command, such as ls would be starting by the default continuation string (/). Yep, I made a poor initial choice and I can't change it now because I would break existing users.

To be done

  • make title of terminal customizable.
  • make path to stylesheet configurable.
  • add themes for the terminal colors.


Copyright (c) 2014 Xavier Décoret. MIT license, see MIT-LICENSE.txt for details.