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