5 ms·

Show HN: Fancy-ANSI – Small JavaScript library for converting ANSI to HTML

16 points by andres 2y ago

I made this tool to add support for custom ANSI palettes to kubetail (https://github.com/kubetail-org/kubetail https://github.com/kubetail-org/kubetail). Maybe you'll find it useful too. Let me know if you have any suggestions!

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 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 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/ 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 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 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-file#sgr-parameters 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 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/ 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.

16 points by andres 2y ago

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 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 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/ 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 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 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-file#sgr-parameters 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 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/ 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.