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!

1. Wrap all Xterm output you would like to format as colorized with:
   <code class="xterm">...</code>.
2. 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.)
3. Profit!

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

Authors

Created by Hacktoolkit and maintained by L33t.xyz.

Contributing

Pull requests are welcome! If you would like to contribute to this project, please fork this repository, create a branch, and submit a pull request.

All meaningful code contributions will be recognized in CONTRIBUTORS.md.

License

See LICENSE.md

This site is open source. Improve this page.