Create a gist now

Instantly share code, notes, and snippets.

Developers are using Octopress to deliver information to other developers. It is important that we consider those other developers when creating our content and how that content is displayed. Defining a custom liquid tag helps you represent your content in a way that is easy to understand. The following gist contains all the content you need to …

To get started with Rails we need to install the gem. From the terminal type:

{% terminal %}
$ gem install rails
Fetching: i18n-0.6.1.gem (100%)
Fetching: multi_json-1.3.6.gem (100%)
Fetching: activesupport-3.2.8.gem (100%)
...
{% endterminal %}
/*-----------------------------------------------------------------------------------*/
/* Window
/*-----------------------------------------------------------------------------------*/
.window {
margin: 0px auto 30px auto;
background: -webkit-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #EDEDED, #EDEDED 23px);
background: -moz-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #EDEDED, #EDEDED 23px);
border-radius: 5px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 22px 50px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
text-align: left;
z-index:0;
visibility:hidden;
opacity:0;
visibility:visible;
opacity:1;
}
.container {
border-radius: 5px;
}
h1.titleInside {
margin: 0px;
position:relative;
z-index:2;
color:#3c3c3c;
font-size:13px;
line-height:21px;
text-decoration:none;
text-shadow: 0 1px 1px #e7e7e7;
text-align:center;
text-transform:capitalize;
}
nav.control-window {
float: left;
padding: 2px 0px 0px 10px;
left:5px;
top:3px;
z-index:10;
height:19px;
}
nav.control-window a {
display: inline-block;
margin: 2px 0px 3px 1px;
width: 12px;
height: 12px;
border-radius: 100%;
box-shadow: 0px 1px 0px rgba(255,255,255,.5);
text-indent: -9999px;
position: relative;
}
nav.control-window a:before {
content: '';
display: block;
position: absolute;
border-radius: 100%;
box-shadow:inset 0 1px 4px rgba(0, 0, 0, .8);
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
nav.control-window a:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 1px;
bottom: 1px;
right: 1px;
border-radius: 100%;
background: -webkit-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
background: -moz-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
}
nav.control-window a.close {
background: #FD4E4E;
}
nav.control-window a.minimize {
background: #F3BB55;
}
nav.control-window a.maximize {
background: #96D16F;
}
nav.control-window a.deactivate {
background: #b5b5b5;
}
/*-----------------------------------------------------------------------------------*/
/* Terminal Console Layout
/*-----------------------------------------------------------------------------------*/
.terminal {
background: #333;
color: #DDD;
white-space: pre-line;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
}
.terminal table {
margin-left: 10px;
margin-right: 10px;
}
div.terminal td {
vertical-align: top;
}
div.terminal pre {
background: none;
border: none;
padding-left: 0px;
box-shadow: none;
-webkit-box-shadow: none;
}
div.terminal pre span {
display: block;
}
div.terminal {
overflow-x: auto;
overflow-y: hidden;
}
div.terminal pre.line-numbers span {
display: inline;
}
div.terminal span.command { color: #FFF; }
div.terminal span.output { color: #BBB; }
module Jekyll
class TerminalTag < Liquid::Block
include TemplateWrapper
def initialize(tag_name, markup, tokens)
super
end
def render(context)
output = super(context)
%{<div class="window">
<nav class="control-window">
<a href="#finder" class="close" data-rel="close">close</a>
<a href="#" class="minimize">minimize</a>
<a href="#" class="deactivate">deactivate</a>
</nav>
<h1 class="titleInside">Terminal</h1>
<div class="container"><div class="terminal">#{promptize(output)}</div></div>
</div>}
end
def promptize(content)
content = content.strip
gutters = content.lines.map { |line| gutter(line) }
lines_of_code = content.lines.map { |line| line_of_code(line) }
table = "<table><tr>"
table += "<td class='gutter'><pre class='line-numbers'>#{gutters.join("\n")}</pre></td>"
table += "<td class='code'><pre><code>#{lines_of_code.join("")}</code></pre></td>"
table += "</tr></table>"
end
def gutter(line)
gutter_value = line.start_with?(command_character) ? command_character : "&nbsp;"
"<span class='line-number'>#{gutter_value}</span>"
end
def line_of_code(line)
if line.start_with?(command_character)
line_class = "command"
line = line.sub(command_character,'').strip
else
line_class = "output"
end
"<span class='line #{line_class}'>#{line}</span>"
end
def command_character
"$"
end
end
end
Liquid::Template.register_tag('terminal', Jekyll::TerminalTag)
@jasonhodges

I would really like to try out your plugin but when I build I receive the following: Warning: Command failed: error: uninitialized constant Jekyll::TerminalTag::TemplateWrapper

Do you have any suggestions? Does this require any dependencies?

Thanks

@jasonhodges

I figured out my problem. I needed the raw.rb file that comes with Octopress and since I am using Jekyll I did not have this. It is located here for anyone using Jekyll that may come across this Gist

@neight-allen

My fork has the necessary code that @jasonhodges mentioned, as well as updated styling for osx 10.11
https://gist.github.com/neight-allen/656ba7206dcc7d85044ff1777008399e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment