2014-01-22

I recently had occasion to display a terminal session on a web page. I captured a typescript using script and ran that through aha to generate HTML, but it used hard-coded colors that match neither my terminal nor this site:

screenshot of rendered aha HTML output

So I added the option to annotate color with classes instead, e.g.:

<span class="red">1f2e5c5</span> <span class="green">5 hours ago:</span>

With a custom stylesheet to map names to a color scheme, in this case Monokai Light,

// Palette
$black:  #49483e; $blue:   #66d9ef; $gray:   #75715e;
$green:  #a6e22e; $orange: #fd971f; $pink:   #f92672;
$purple: #ae81ff; $white:  #f8f8f2; $yellow: #e6db74;

// Default colors
.reset    {color:            $white;}
.bg-reset {background-color: $black;}

// Named colors
$map: black  $black,  blue $blue, cyan  $orange, green  $green,
      purple $purple, red  $pink, white $white,  yellow $yellow;
@each $name, $value in $map {
  .#{$name}    {color:            $value}
  .bg-#{$name} {background-color: $value}
}

// Effects
.bold      {font-weight:     bold;}
.blink     {text-decoration: blink;}
.underline {text-decoration: underline;}

the result turned out nicely:

screenshot of rendered aha HTML output