Show HN: Fancy-ANSI – Small JavaScript library for converting ANSI to HTML (github.com)

16 points by andres 2y ago ↗ HN

I made this tool to add support for custom ANSI palettes to kubetail (https://github.com/kubetail-org/kubetail). Maybe you'll find it useful too.

Let me know if you have any suggestions!

11 comments

[ 3.8 ms ] story [ 29.4 ms ] thread

chrismorgan 2y ago ↗

Simple bug report: an empty SGR (CSI m, [m) doesn’t do anything, but should be equivalent to 0, reset all.

andres 2y ago ↗

Noted, thanks https://github.com/kubetail-org/fancy-ansi/issues/1

andres 2y ago ↗

Update: fixed in v0.1.1 https://www.npmjs.com/package/fancy-ansi

blueflow 2y ago ↗

It is unclear to what extent the ANSI control codes are implemented. The README mentions SGR and the 24-bit color extensions in the nonstandard semicolon syntax. What about cursor movements? Backspace? Overstriking?

Which "ANSI" did you use as reference?

epage 2y ago ↗

> It is unclear to what extent the ANSI control codes are implemented.

The demo helps a bit: https://kubetail-org.github.io/fancy-ansi/

kevin_thibedeau 2y ago ↗

A travesty it's missing blink support.

andres 2y ago ↗

Created issue: https://github.com/kubetail-org/fancy-ansi/issues/2

Blink support would use CSS animations which requires a deeper level of integration than the other SGR parameters so I wanted to hold off until I could iterate over a solution with a user. If you'd like to use Fancy-ANSI with blink support, please let me know on GitHub and I can implement it fairly quickly.

andres 2y ago ↗

The library is focused on text styling so it only implements ANSI SGR parameters. I used this as a reference: https://en.wikipedia.org/wiki/ANSI_escape_code

The full list of supported SGR parameters is in the README: https://github.com/kubetail-org/fancy-ansi?tab=readme-ov-fil...

Let me know if you have any suggestions on how to make it clearer which subset of ANSI is supported.

epage 2y ago ↗

Recently did something similar in Rust but for generating SVGs. We've adopted it for snapshot testing of cargo and rustc's output. Don't have a good PR handy for showing Github's rendering of changes in the SVG (text, side-by-side, swiping) but https://github.com/rust-lang/rust/pull/121877/files has newly added SVGs.

To see what is supported, see the screenshot in the docs: https://docs.rs/anstyle-svg/latest/anstyle_svg/

giraffe_lady 2y ago ↗

Ah this is awesome. I've been working on a browser based mud client and none of the existing options handled everything I needed. I'll be switching to this immediately, it seems to solve all of my current problems with displaying ansi text in the browser.

andres 2y ago ↗

Awesome! Great to hear it's useful for your project. Let me know if you have any questions or run into any issues.