ansicolor
A JavaScript ANSI color/style management. ANSI parsing. ANSI to CSS. Small, clean, no dependencies.
npm install ansicolorWhat For
- String coloring with ANSI escape codes
- Solves the style hierarchy problem (when other similar tools fail)
- Parsing/removing ANSI style data from strings
- Converting ANSI styles to CSS or a Chrome DevTools-compatible output
- A middleware for your platform-agnostic logging system
Why Another One?
Other tools lack consistency, failing to solve a simple hierarchy problem:
// a popular color utility console
WTF?! The bar word above should be rendered in red, but it's not! That sucks. It's because ANSI codes are linear, not hierarchical (as with XML/HTML). A special kind of magic is needed to make this work. Ansicolor does that magic for you:
nice // .nice for unsafe String extensions console
Nice!
Crash Course
Importing (as methods):
const green inverse bgLightCyan underline dim = Usage:
consoleconsole // method chainingImporting (as object):
Nice Mode (not recommended)
const ansi = niceThe ('ansicolor').nice export defines styling APIs on the String prototype directly. It uses an ad-hoc DSL (sort of) for infix-style string coloring. The nice is convenient, but not safe, avoid using it in public modules, as it alters global objects, and that might cause potential hard-to-debug compatibility issues.
consoleSupported Styles
'foreground colors' redgreenyellowbluemagentacyanwhitedarkGrayblack'light foreground colors' lightRedlightGreenlightYellowlightBluelightMagentalightCyanlightGray'background colors' bgRedbgGreenbgYellowbgBluebgMagentabgCyanbgWhitebgDarkGraybgBlack'light background colors' bgLightRedbgLightGreenbgLightYellowbgLightBluebgLightMagentabgLightCyanbgLightGray'styles' brightdimitalicunderlineinverse // your platform should support italicYou also can obtain all those style names (for reflection purposes):
const names = names // ['red', 'green', ...Removing ANSI Styles From Strings
const strip = ) // 'foofoo'Converting to CSS/HTML
Inspection of ANSI styles in arbitrary strings is essential when implementing platform-agnostic logging — that piece of code is available under command line interface and in a browser as well. Here's an example of how you would parse a colored string into an array-like structure. That structure can be traversed later to build HTML/JSON/XML or any other markup/syntax.
const parse = const parsed = The ansi.parse () method will return a pseudo-array of styled spans, you can iterate over it with a for ... of loop and convert it to an array with the spread operator (...). Also, there's the .spans property for obtaining the already-spread array directly:
assertCustom Color Themes
You can change default RGB values (won't work in terminals, affects only the ANSI→CSS transformation part):
const ansi = ansirgb = black: 0 0 0 darkGray: 100 100 100 lightGray: 200 200 200 white: 255 255 255 red: 204 0 0 lightRed: 255 51 0 green: 0 204 0 lightGreen: 51 204 51 yellow: 204 102 0 lightYellow: 255 153 51 blue: 0 0 255 lightBlue: 26 140 255 magenta: 204 0 204 lightMagenta: 255 0 255 cyan: 0 153 255 lightCyan: 0 204 255Chrome DevTools Compatibility
Web browsers usually implement their own proprietary CSS-based color formats for console.log and most of them fail to display standard ANSI colors. Ansicolor offers you a helper method to convert ANSI-styled strings to browser-compatible argument lists acceptable by Chrome's console.log:
const bgGreen red parse = const string = 'foo' + const parsed = console // prints with colors in Chrome!Here's what the format looks like:
parsedasChromeConsoleLogArguments // [ "%cfoo%cbar%cbaz", // "", // "font-weight: bold;text-decoration: underline;background:rgba(255,51,0,1);color:rgba(0,204,0,1);", // "background:rgba(0,204,0,1);" // ]Play with this feature online: demo page. Open the DevTools console and type expressions in the input box to see colored console output.
Happy logging!
