2014-01-22

I re­cently had oc­ca­sion to dis­play a ter­mi­nal ses­sion on a web page. I cap­tured a type­script us­ing script and ran that through aha to gen­er­ate HTML, but it used hard-coded col­ors that match nei­ther my ter­mi­nal nor this site:

screenshot of rendered aha HTML output

So I added the op­tion to an­no­tate color with classes in­stead, e.g.:

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

With a cus­tom 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 re­sult turned out nicely:

screenshot of rendered aha HTML output