Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This has been modified from @burtio's. This has the TemplateWrapper needed for Jekyll installations. I also converted the css to scss. It has more properties that I needed for compatibility with our site's styling, and styling is based on OSX 10.11. I had to abandon this because gh-pages doesn't support custom plugins.

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: #EDEDED;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 22px 50px 0px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.2);
text-align: left;
z-index: 0;
visibility: hidden;
opacity: 0;
visibility: visible;
opacity: 1;
.terminal-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;
font-weight: normal;
}
nav.control-window {
float: left;
padding: 2px 0px 0px 10px;
left: 5px;
top: 3px;
z-index: 10;
height: 19px;
a {
display: inline-block;
margin: 2px 3px 3px 1px;
width: 12px;
height: 12px;
border-radius: 100%;
text-indent: -9999px;
position: relative;
border: none;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
&.close {
background: #FB5149;
}
&.minimize {
background: #FFB429;
}
&.maximize {
background: #24C238;
}
&.deactivate {
background: #b5b5b5;
}
}
}
}
/*-----------------------------------------------------------------------------------*/
/* Terminal Console Layout
/*-----------------------------------------------------------------------------------*/
div.terminal {
background: #333;
color: #DDD;
white-space: pre-line;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
table {
margin-left: 10px;
margin-right: 10px;
box-shadow: none;
}
tr {
padding: 0;
}
td {
vertical-align: top;
border: none;
padding: 0;
}
pre {
background: none;
border: none;
margin-top: 0.5em;
padding-left: 0px;
padding-top: 0px;
box-shadow: none;
-webkit-box-shadow: none;
overflow-x: auto;
span {
display: block;
}
&.line-numbers span {
display: inline;
color: #586e75;
}
}
overflow-x: auto;
overflow-y: hidden;
span {
&.command {
color: #FFF;
}
&.output {
color: #BBB;
}
}
code {
background-color: transparent;
display: inline;
padding: 0;
}
}
module TemplateWrapper
# Wrap input with a <div>
def self.safe_wrap(input)
"<div class='bogus-wrapper'><notextile>#{input}</notextile></div>"
end
# This must be applied after the
def self.unwrap(input)
input.gsub /<div class=['"]bogus-wrapper['"]><notextile>(.+?)<\/notextile><\/div>/m do
$1
end
end
end
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="maximize">maximize</a>
</nav>
<h1 class="titleInside">Terminal</h1>
<div class="terminal-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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.