projects | blog

[original] [fan art] [color-izer] how I display ascii art

When I want to display ascii art, I have to wrap it in <pre> tags, which will prevent whitespace from collapsing, and should end up displaying in a monospace font. This is pretty simple to do.

,* (.-) (.-~') (.-~') [====] \ / \/

But I also like when text is different colors, so I like to color my ascii art. The right way to do this nowadays is by using css, so I created a css file with all the different colors I want to use in my ascii art. And then every single character in my ascii art picture gets put in a <span> element with one of the color classes.

<span class="lightgold"> ,* (</span><span class="tan">.-</span><span class="lightgold">) (</span><span class="tan">.-~'</span><span class="lightgold">) (</span><span class="tan">.-~'</span><span class="lightgold">) </span><span class="yellorange">[====] \ / \/ </span>

This can get kind of tedious if I'm typing this all out manually (which I did at first!) so that's why I wrote up a little tool to help me with this.

   \  /