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.
,* (.-) (.-~') (.-~') [====] \ / \/