Browser console

console-marker works in both Node.js and the browser from the same import. In the browser, every builder gains .log, .warn, .error, .info, and .debug methods that emit styled output to DevTools via the %c CSS format.

How it works

Browser DevTools don't interpret ANSI escape codes. Instead they use the %c format specifier:

// Raw browser API
console.log('%cHello%c', 'color:red;font-weight:bold', '')

console-marker handles this automatically. Call .log() on any builder instead of passing the styled string to console.log:

import marker from 'console-marker';

// Instead of:
console.log(marker.red.bold('Hello'))  // logs raw ANSI codes in the browser

// Use:
marker.red.bold.log('Hello')           // styled in both Node and browser

The same line of code produces:

• Node.js — console.log('\x1b[31m\x1b[1mHello\x1b[22m\x1b[39m')
• Browser — console.log('%cHello%c', 'color:#cd3131;font-weight:bold', '')

All five methods

marker.red.log('error message')
marker.yellow.warn('deprecation notice')
marker.red.bold.error('fatal error')
marker.cyan.info('connecting...')
marker.dim.debug('internal state')

Chaining with browser output

The full chain API works as normal. Each style in the chain contributes to the accumulated CSS string:

marker.bgBlue.white.bold.log(' SUCCESS ')
// → '%c SUCCESS %c', 'background-color:#2472c8;color:#e5e5e5;font-weight:bold', ''

marker.red.italic.underline.log('critical')
// → '%ccritical%c', 'color:#cd3131;font-style:italic;text-decoration:underline', ''

Tagged templates

.log() and friends accept tagged template literals:

const count = 3;
const file = 'index.ts';

marker.yellow.warn`${count} warnings in ${file}`
marker.green.log`Build complete in ${elapsed}ms`

Dynamic colors

rgb(), hex(), bgRgb(), and bgHex() all translate to full rgb() CSS values in the browser, regardless of the terminal color level:

marker.hex('#FF6400').log('custom orange')
// → '%ccustom orange%c', 'color:rgb(255,100,0)', ''

marker.rgb(0, 200, 100).bold.log('success')
// → '%csuccess%c', 'color:rgb(0,200,100);font-weight:bold', ''

CSS color palette

Named colors use the VSCode terminal default palette so they look good in browser DevTools:

Name	CSS
red	color:#cd3131
green	color:#0dbc79
yellow	color:#e5e510
blue	color:#2472c8
magenta	color:#bc3fbc
cyan	color:#11a8cd
gray / grey	color:#666666
redBright	color:#f14c4c
greenBright	color:#23d18b

Background colors follow the same palette with background-color: prefix.

Disabling styles

level === 0 disables styling everywhere, including browser console methods:

import { withLevel } from 'console-marker';

const m = withLevel(0);
m.red.log('this logs without any styling');

Limitations

A few ANSI modifiers don't have a direct CSS equivalent and are silently skipped in browser mode:

Style	CSS
inverse	(skipped)
reset	(skipped)

All other styles — bold, dim, italic, underline, overline, strikethrough, hidden, and all colors — translate to CSS.

String-call API unchanged

The plain string-call API is not affected. marker.red('text') still returns an ANSI string in Node and a plain string in the browser. Only .log() / .warn() / .error() / .info() / .debug() apply browser CSS styling.