#jekyll-terminal
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.
First, add the plugin to your jekyll site, by putting the following lines in your _config.yml
file inside the generaged jekyll directory.
gems:
- 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.
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
/END
{% 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:
terminal:
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.
Copyright (c) 2014 Xavier Décoret. MIT license, see MIT-LICENSE.txt for details.