Skip to content

Instantly share code, notes, and snippets.

@heapcrash

heapcrash/README.md Secret

Last active February 24, 2021 07:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save heapcrash/89c637d3e8e515123fc813fd944e9d2a to your computer and use it in GitHub Desktop.
Save heapcrash/89c637d3e8e515123fc813fd944e9d2a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

ANSI control codes to HTML

$ brew install cowsay lolcat ansifilter

Generating this document

$ cowsay Hello, world | lolcat -f | ansifilter --html -o output.html

Generates this rendered output from Safari:

Generating a fragment

Generating with --fragment removes the head and body and style tags, leaving just a bunch of <span style="color:..."> tags.

For example:

<span style="color:#03d2a9;"> </span><span style="color:#04d6a5;">_</span><span style="color:#05d9a1;">_</span><span style="color:#06dc9d;">_</span><span style="color:#07de99;">_</span><span style="color:#08e195;">_</span><span style="color:#0ae491;">_</span><span style="color:#0ce68d;">_</span><span style="color:#0de988;">_</span><span style="color:#0feb84;">_</span><span style="color:#11ed80;">_</span><span style="color:#14ef7c;">_</span><span style="color:#16f177;">_</span><span style="color:#18f373;">_</span><span style="color:#1bf56f;">_</span><span style="color:#1df66b;"> </span><span style="color:#20f867;"></span>

Pasting into Markdown / Hugo

It appears that Hugo does not like the inline / embedded --fragment code, and it does not render properly.

Rendering without --fragment causes there to be extra <html> and <head> tags which is clearly not desirable -- but also doesn't work.

It looks like my raw HTML fragment is replaced with:

<!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<blockquote>
</blockquote>
Raw
output.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
pre {
font-family:Courier New;
font-size:10pt;
}
.af_line {
color: gray;
text-decoration: none;
}
</style>
<title>Source file</title>
</head>
<body>
<pre><span style="color:#da05a0;"> </span><span style="color:#d704a4;">_</span><span style="color:#d403a8;">_</span><span style="color:#d002ac;">_</span><span style="color:#cd02b0;">_</span><span style="color:#ca01b4;">_</span><span style="color:#c601b7;">_</span><span style="color:#c301bb;">_</span><span style="color:#bf01bf;">_</span><span style="color:#bb01c3;">_</span><span style="color:#b801c6;">_</span><span style="color:#b401ca;">_</span><span style="color:#b002cd;">_</span><span style="color:#ac02d0;">_</span><span style="color:#a803d4;">_</span><span style="color:#a404d7;"> </span><span style="color:#a005da;"></span>
<span style="color:#d002ac;">&lt;</span><span style="color:#cd02b0;"> </span><span style="color:#ca01b4;">H</span><span style="color:#c601b7;">e</span><span style="color:#c301bb;">l</span><span style="color:#bf01bf;">l</span><span style="color:#bb01c3;">o</span><span style="color:#b801c6;">,</span><span style="color:#b401ca;"> </span><span style="color:#b002cd;">w</span><span style="color:#ac02d0;">o</span><span style="color:#a803d4;">r</span><span style="color:#a404d7;">l</span><span style="color:#a005da;">d</span><span style="color:#9c06dd;"> </span><span style="color:#9807df;">&gt;</span><span style="color:#9309e2;"></span>
<span style="color:#c601b7;"> </span><span style="color:#c301bb;">-</span><span style="color:#bf01bf;">-</span><span style="color:#bb01c3;">-</span><span style="color:#b801c6;">-</span><span style="color:#b401ca;">-</span><span style="color:#b002cd;">-</span><span style="color:#ac02d0;">-</span><span style="color:#a803d4;">-</span><span style="color:#a404d7;">-</span><span style="color:#a005da;">-</span><span style="color:#9c06dd;">-</span><span style="color:#9807df;">-</span><span style="color:#9309e2;">-</span><span style="color:#8f0ae5;">-</span><span style="color:#8b0ce7;"> </span><span style="color:#870eea;"></span>
<span style="color:#bb01c3;"> </span><span style="color:#b801c6;"> </span><span style="color:#b401ca;"> </span><span style="color:#b002cd;"> </span><span style="color:#ac02d0;"> </span><span style="color:#a803d4;"> </span><span style="color:#a404d7;"> </span><span style="color:#a005da;"> </span><span style="color:#9c06dd;">\</span><span style="color:#9807df;"> </span><span style="color:#9309e2;"> </span><span style="color:#8f0ae5;"> </span><span style="color:#8b0ce7;">^</span><span style="color:#870eea;">_</span><span style="color:#8310ec;">_</span><span style="color:#7e12ee;">^</span><span style="color:#7a14f0;"></span>
<span style="color:#b002cd;"> </span><span style="color:#ac02d0;"> </span><span style="color:#a803d4;"> </span><span style="color:#a404d7;"> </span><span style="color:#a005da;"> </span><span style="color:#9c06dd;"> </span><span style="color:#9807df;"> </span><span style="color:#9309e2;"> </span><span style="color:#8f0ae5;"> </span><span style="color:#8b0ce7;">\</span><span style="color:#870eea;"> </span><span style="color:#8310ec;"> </span><span style="color:#7e12ee;">(</span><span style="color:#7a14f0;">o</span><span style="color:#7617f2;">o</span><span style="color:#7219f4;">)</span><span style="color:#6e1cf5;">\</span><span style="color:#691ef7;">_</span><span style="color:#6521f8;">_</span><span style="color:#6124fa;">_</span><span style="color:#5d27fb;">_</span><span style="color:#592afc;">_</span><span style="color:#552dfc;">_</span><span style="color:#5130fd;">_</span><span style="color:#4d34fe;"></span>
<span style="color:#a404d7;"> </span><span style="color:#a005da;"> </span><span style="color:#9c06dd;"> </span><span style="color:#9807df;"> </span><span style="color:#9309e2;"> </span><span style="color:#8f0ae5;"> </span><span style="color:#8b0ce7;"> </span><span style="color:#870eea;"> </span><span style="color:#8310ec;"> </span><span style="color:#7e12ee;"> </span><span style="color:#7a14f0;"> </span><span style="color:#7617f2;"> </span><span style="color:#7219f4;">(</span><span style="color:#6e1cf5;">_</span><span style="color:#691ef7;">_</span><span style="color:#6521f8;">)</span><span style="color:#6124fa;">\</span><span style="color:#5d27fb;"> </span><span style="color:#592afc;"> </span><span style="color:#552dfc;"> </span><span style="color:#5130fd;"> </span><span style="color:#4d34fe;"> </span><span style="color:#4937fe;"> </span><span style="color:#453bfe;"> </span><span style="color:#423efe;">)</span><span style="color:#3e42fe;">\</span><span style="color:#3a46fe;">/</span><span style="color:#374afe;">\</span><span style="color:#334dfe;"></span>
<span style="color:#9807df;"> </span><span style="color:#9309e2;"> </span><span style="color:#8f0ae5;"> </span><span style="color:#8b0ce7;"> </span><span style="color:#870eea;"> </span><span style="color:#8310ec;"> </span><span style="color:#7e12ee;"> </span><span style="color:#7a14f0;"> </span><span style="color:#7617f2;"> </span><span style="color:#7219f4;"> </span><span style="color:#6e1cf5;"> </span><span style="color:#691ef7;"> </span><span style="color:#6521f8;"> </span><span style="color:#6124fa;"> </span><span style="color:#5d27fb;"> </span><span style="color:#592afc;"> </span><span style="color:#552dfc;">|</span><span style="color:#5130fd;">|</span><span style="color:#4d34fe;">-</span><span style="color:#4937fe;">-</span><span style="color:#453bfe;">-</span><span style="color:#423efe;">-</span><span style="color:#3e42fe;">w</span><span style="color:#3a46fe;"> </span><span style="color:#374afe;">|</span><span style="color:#334dfe;"></span>
<span style="color:#8b0ce7;"> </span><span style="color:#870eea;"> </span><span style="color:#8310ec;"> </span><span style="color:#7e12ee;"> </span><span style="color:#7a14f0;"> </span><span style="color:#7617f2;"> </span><span style="color:#7219f4;"> </span><span style="color:#6e1cf5;"> </span><span style="color:#691ef7;"> </span><span style="color:#6521f8;"> </span><span style="color:#6124fa;"> </span><span style="color:#5d27fb;"> </span><span style="color:#592afc;"> </span><span style="color:#552dfc;"> </span><span style="color:#5130fd;"> </span><span style="color:#4d34fe;"> </span><span style="color:#4937fe;">|</span><span style="color:#453bfe;">|</span><span style="color:#423efe;"> </span><span style="color:#3e42fe;"> </span><span style="color:#3a46fe;"> </span><span style="color:#374afe;"> </span><span style="color:#334dfe;"> </span><span style="color:#3051fd;">|</span><span style="color:#2d55fc;">|</span><span style="color:#2a59fb;"></span>
</pre>
</body>
</html>
<!--HTML generated by ansifilter 2.18, http://www.andre-simon.de/-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment