Browser support? about chalk

[L1fescape]

@callmehiphop Did you do something similar to the following:

var chalk = require('chalk');
var ansi_up = require('ansi_up');
chalk.enabled = true;

function styledConsoleLog() {
   ... copied from ConsoleFlair (mentioned above) ...
}

styledConsoleLog(ansi_up.ansi_to_html(chalk.red.bold('Foo')));

Admittedly it's overkill, but that's the only way I could get it to work with browserify.

[sindresorhus]

lol no, sorry, this won't be a bloated mess like colors.js.

[tmcw]

For my usecase of displaying colored error messages in-browser, ansi-html seems to work well.

[sindresorhus]

Just curious. Why would you need it for the browser? What's the usecase?

[danielchatfield]

That's what I figured, just thought I'd check before starting my own repo.

[vjpr]

Such a disappointment.

@danielchatfield did you manage to make your own repo or find that has a similar api with browser support?

[vjpr]

As you know webkit supports colors in console logging. The syntax is painful though.

Instead of console.log('%cFoo','color:red; font-weight:bold') I want to write console.log(chalk.red.bold('Foo')).

The ability to create styles for different modules in client-side single pagers would be helpful.

[vjpr]

It would be great to have it pump out Firebug and Webkit compatible styles, but HTML styles would be great too. Libs like this can bridge the gap: https://github.com/hansifer/ConsoleFlair.

[callmehiphop]

I ran across an extremely uncommon use case for this at work and got it working pretty easily with browserify and setting chalk.enabled = true.

I'd like to use it (Ora spinners) with xterm.js in the browser. ^_^

xtermjs/xterm.js#1400

[j0hnm4r5]

My awful solution for now:

const isNode = typeof process === "object" && `${process}` === "[object process]";

function log(logger, color, label, message) {
	if (isNode) {
		logger(
			chalk
				.bgHex(color)
				.hex("#FFFFFF")
				.bold(` ${label} `),
			`${message}`
		);
	} else {
		logger(
			`%c ${label} %c ${message}`,
			`background-color: ${color}; color: #FFFFFF`,
			`background-color: inherit; color: inherit`
		);
	}
}

EDIT: I just turned this into a project: Hagen — the colorful logger

[Qix-]

There are a variety of solutions to this problem (using Chalk in the browser), most of them kind of messy and entirely out of scope for this project.

Locking as such.

[sindresorhus]

Please see #300