l33t-xyz / xterm.js Goto Github PK

View Code? Open in Web Editor NEW

A drop-in JavaScript module to colorize Xterm output (both ANSI 16 + 256 colors) on your webpages. Absolutely no external dependencies required!

License: MIT License

HTML 100.00%

xterm.js's Introduction

xterm.js

A drop-in JavaScript module to colorize Xterm output (both ANSI 16 + 256 colors) on your webpages. Absolutely no external dependencies required!

Live Demo

A demo is worth a thousand words.

Basic Demo: See a live demo (source).
Visual regression test with ANSI 16 + 256 colors (source).

How It Works

Like magic, it turns simple HTML markup using the <code> tag with the xterm class:

<code class="xterm">
@g[1] Your flame @G<@W*><-:-><*@G> @YSLAUGHTERS @G<@W*><-:-><*@G>@w @gan antlion! @R[358]
@RAn antlion screams as the flames engulf it!!
@wYou receive @G68+7+@R7@w experience points.
@wYou receive @G82@w bonus experience points from your daily blessing.
@wYou have @Y71@w daily blessing bonus experience kills remaining.
@wYou get @Y6,790@w gold coins from the charred corpse of an antlion.
@MYou are taxed @Y67@M gold coins by your clan.
@wYou get an @ra@wn@rt@wl@ri@wo@rn @Y{@whusk@Y}@w from the charred corpse of an antlion.
@cThe Fallen Soldier gives you @Y62@c gold coins for the charred corpse of an antlion.
</code>

... into l33t output you can share with your MUD and RL friends:

Get Started in under 30 seconds

It's as easy as 1, 2, 3!

Wrap all Xterm output you would like to format as colorized with:
<code class="xterm">...</code>.
Include this line before the closing </body> tag of your HTML document:
<script type="text/javascript" src="//l33t-xyz.github.io/xterm.js/xterm.js"></script>
(Alternatively, if you would like, download the file xterm.js and upload it to your webserver to host it locally.)
Profit!

If you're using a preprocessor like Markdown or MDX, the language-xterm class also works.