Gem for Jekyll to render nice terminals.
Ruby HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.travis.yml
Gemfile
Gemfile.lock
README.md
Rakefile
jekyll-terminal.gemspec
sample.html
sample.md
screenshot.png

README.md

jekyll-terminal

Join the chat at https://gitter.im/Xadeck/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.

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.

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.

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

Configuration

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.

To be done

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

License

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