base16-ohnonot-templates/templates/preview_html.mustache

<div class="previewbox" style="border-color:#{{base00-hex}}">
<h2 id="{{ scheme-slug }}">{{ scheme-name }}<a href="#" class="toc-nav"> #</a></h2>
<p class="author">Scheme author: {{scheme-author}}</p>
<div>
  <div class="block" style="background:#{{base00-hex}};color:#{{base07-hex}}">00</div>
  <div class="block" style="background:#{{base01-hex}};color:#{{base07-hex}}">01</div>
  <div class="block" style="background:#{{base02-hex}};color:#{{base07-hex}}">02</div>
  <div class="block" style="background:#{{base03-hex}};color:#{{base07-hex}}">03</div>
  <div class="block" style="background:#{{base04-hex}};color:#{{base00-hex}}">04</div>
  <div class="block" style="background:#{{base05-hex}};color:#{{base00-hex}}">05</div>
  <div class="block" style="background:#{{base06-hex}};color:#{{base00-hex}}">06</div>
  <div class="block" style="background:#{{base07-hex}};color:#{{base00-hex}}">07</div>
  <br />
  <div class="block" style="background:#{{base08-hex}};color:#{{base07-hex}}">08</div>
  <div class="block" style="background:#{{base09-hex}};color:#{{base07-hex}}">09</div>
  <div class="block" style="background:#{{base0A-hex}};color:#{{base07-hex}}">0A</div>
  <div class="block" style="background:#{{base0B-hex}};color:#{{base07-hex}}">0B</div>
  <div class="block" style="background:#{{base0C-hex}};color:#{{base07-hex}}">0C</div>
  <div class="block" style="background:#{{base0D-hex}};color:#{{base07-hex}}">0D</div>
  <div class="block" style="background:#{{base0E-hex}};color:#{{base07-hex}}">0E</div>
  <div class="block" style="background:#{{base0F-hex}};color:#{{base07-hex}}">0F</div>
</div>
<div>
<pre style="background:#{{base00-hex}};color:#{{base05-hex}}">
<span style="color:#{{base0E-hex}}">require</span> <span style="color:#{{base0B-hex}}">"gem"</span>

<span style="color:#{{base08-hex}}">string</span> = <span style="color:#{{base0B-hex}}">"base16"</span>
<span style="color:#{{base08-hex}}">symbol</span> = <span style="color:#{{base0B-hex}}">:base16</span>
<span style="color:#{{base08-hex}}">fixnum</span> = <span style="color:#{{base09-hex}}">0</span>
<span style="color:#{{base08-hex}}">float</span>  = <span style="color:#{{base09-hex}}">0.00</span>
<span style="color:#{{base08-hex}}">array</span>  = <span style="color:#{{base0A-hex}}">Array</span>.<span style="color:#{{base0D-hex}}">new</span>
<span style="color:#{{base08-hex}}">array</span>  = [<span style="color:#{{base0B-hex}}">'chris'</span>, <span style="color:#{{base09-hex}}">85</span>]
<span style="color:#{{base08-hex}}">hash</span>   = {<span style="color:#{{base0B-hex}}">"test"</span> => <span style="color:#{{base0B-hex}}">"test"</span>}
<span style="color:#{{base08-hex}}">regexp</span> = <span style="color:#{{base0C-hex}}">/[abc]/</span>

<span style="color:#{{base0E-hex}}">class</span> <span style="color:#{{base0A-hex}}">Person</span> <span style="color:#{{base03-hex}}"># This is a comment</span>
  <span style="color:#{{base0D-hex}}">attr_accessor</span> <span style="color:#{{base0B-hex}}">:name</span>
  <span style="color:#{{base0E-hex}}">def</span> <span style="color:#{{base0D-hex}}">initialize</span>(<span style="color:#{{base08-hex}}">attributes</span> = {})
    <span style="color:#{{base08-hex}}">@name</span> = <span style="color:#{{base08-hex}}">attributes</span>[<span style="color:#{{base0B-hex}}">:name</span>]
  <span style="color:#{{base0E-hex}}">end</span>
  <span style="color:#{{base0E-hex}}">def</span> <span style="color:#{{base0E-hex}}">self</span>.<span style="color:#{{base0D-hex}}">greet</span>
    <span class="base02-background"><span style="color:#{{base0B-hex}}">"hello"</span></span>
  <span style="color:#{{base0E-hex}}">end</span>
<span style="color:#{{base0E-hex}}">end</span>

<span style="color:#{{base08-hex}}">person1</span> = <span style="color:#{{base0A-hex}}">Person</span>.<span style="color:#{{base0D-hex}}">new</span>(<span style="color:#{{base0B-hex}}">:name</span> => <span style="color:#{{base0B-hex}}">"Chris"</span>)
<span style="color:#{{base0D-hex}}">print</span> <span style="color:#{{base0A-hex}}">Person</span>::<span style="color:#{{base0D-hex}}">greet</span>, <span style="color:#{{base08-hex}}">person1</span>.<span style="color:#{{base0D-hex}}">name</span>, <span style="color:#{{base0B-hex}}">"<span style="color:#{{base09-hex}}">\n</span>"</span>
<span style="color:#{{base0D-hex}}">puts</span> <span style="color:#{{base0B-hex}}">"say </span><span style="color:#{{base0F-hex}}">#{</span><span style="color:#{{base0A-hex}}">Person</span>::<span style="color:#{{base0D-hex}}">greet</span><span style="color:#{{base0F-hex}}">}</span> <span style="color:#{{base0F-hex}}">#{</span><span style="color:#{{base08-hex}}">person1</span>.<span style="color:#{{base0D-hex}}">name</span><span style="color:#{{base0F-hex}}">}</span><span style="color:#{{base0B-hex}}">"</span>
</pre>
</div>
</div>