Skip to content
Gem for Jekyll to render nice terminals.
Branch: master
Clone or download


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.

You can’t perform that action at this time.