Skip to content

Instantly share code, notes, and snippets.

@abritinthebay
Last active November 29, 2024 05:20
Show Gist options
  • Save abritinthebay/d80eb99b2726c83feb0d97eab95206c4 to your computer and use it in GitHub Desktop.
Save abritinthebay/d80eb99b2726c83feb0d97eab95206c4 to your computer and use it in GitHub Desktop.
The various escape codes you can use to color output to StdOut from Node JS
// Colors reference
// You can use the following as so:
// console.log(colorCode, data);
// console.log(`${colorCode}some colorful text string${resetCode} rest of string in normal color`);
//
// ... and so on.
export const reset = "\x1b[0m"
export const bright = "\x1b[1m"
export const dim = "\x1b[2m"
export const underscore = "\x1b[4m"
export const blink = "\x1b[5m"
export const reverse = "\x1b[7m"
export const hidden = "\x1b[8m"
export const black = "\x1b[30m"
export const red = "\x1b[31m"
export const green = "\x1b[32m"
export const yellow = "\x1b[33m"
export const blue = "\x1b[34m"
export const magenta = "\x1b[35m"
export const cyan = "\x1b[36m"
export const white = "\x1b[37m"
export const BGblack = "\x1b[40m"
export const BGred = "\x1b[41m"
export const BGgreen = "\x1b[42m"
export const BGyellow = "\x1b[43m"
export const BGblue = "\x1b[44m"
export const BGmagenta = "\x1b[45m"
export const BGcyan = "\x1b[46m"
export const BGwhite = "\x1b[47m"
@abritinthebay
Copy link
Author

Bright is bold, yes. That's the ANSI format spec name. So it's correct ;)

Cursive is non-standard and not supported by many (most?) terminals, in most ones that ship as standard with many distros (inc mac and windows) which is why it's not included.

@yuharsenergi
Copy link

yuharsenergi commented May 7, 2021

It works in every shell stdout I think

@frederikocmr
Copy link

frederikocmr commented Jul 16, 2021

Hey thanks for sharing these color codes. Here I share the function I have to log using Javascript, in case someone needs it:

export const CONSOLE_COLORS = {
  blue: '\x1b[34m',
  green: '\x1b[32m',
  red: '\x1b[31m',
  white: '\x1b[37m',
  yellow: '\x1b[33m',
 ...
};

/**
 * Prints a value in the console if the app is running in development mode.
 *
 * @param {*} message
 * @param {String} type Accepts one of: 'blue', 'green', 'red', 'yellow', 'white'. (Default is 'white').
 */
export const printLog = (message, type = 'white') => {
  // if (process.env.NODE_ENV === 'development') {
  console.log(`${CONSOLE_COLORS[type]}%s\x1b[0m`, message); 
  // }
};

@a-r-r-o-w
Copy link

If you'd like to be able to use more colors, you could make use of the color index format \x1b[38;5;n for text and \x1b[48;5;n for background.

for (let i = 0; i < 256; ++i)
  console.log(`\x1b[38;5;${i}mhello\x1b[0m`)
for (let i = 0; i < 256; ++i)
  console.log(`\x1b[48;5;${i}mhello\x1b[0m`)

The first loop should give you 256 text color outputs and the second loop should give you 256 background color outputs.

output

@ackvf
Copy link

ackvf commented Feb 24, 2022

I've been using it like this

export const colors = {
  uncolorize: (str: string) => str.replace(/\x1B\[\d+m/gi, ''),
  reset: '\x1b[0m',
  bright: '\x1b[1m',
  dim: '\x1b[2m',     // bold
  italic: '\x1b[3m',  // non-standard feature
  underscore: '\x1b[4m',
  blink: '\x1b[5m',
  reverse: '\x1b[7m',
  hidden: '\x1b[8m',

  fg: {
    black: '\x1b[30m',
    red: '\x1b[31m',
    green: '\x1b[32m',
    yellow: '\x1b[33m',
    blue: '\x1b[34m',
    magenta: '\x1b[35m',
    cyan: '\x1b[36m',
    white: '\x1b[37m',
    crimson: '\x1b[38m',
  },

  bg: {
    black: '\x1b[40m',
    red: '\x1b[41m',
    green: '\x1b[42m',
    yellow: '\x1b[43m',
    blue: '\x1b[44m',
    magenta: '\x1b[45m',
    cyan: '\x1b[46m',
    white: '\x1b[47m',
    crimson: '\x1b[48m',
  },
}

and

const m = extractMessage
function extractMessage(args: Args): string {
  if (isTemplate(args)) return interlace(...args)
  return `${args[0]}`
}

function isTemplate(args: Args): args is TemplateArgs { return args?.[0]?.raw }

function interlace(strs: TemplateStringsArray, ...args: any[]): string {
  return strs.reduce((prev, current, ix) => prev + (current ?? '') + (args[ix] ?? ''), '')
}

type TemplateArgs = [message: TemplateStringsArray, ...values: any[]]
type Args = [message: any] | TemplateArgs
type Colorizer = (...message: Args) => string

// ---------------------------------------------------------------------------------------------------------------------

/**
 * Colorize console output with these helper methods.
 * They can either be used as *tagged template literal* or as a *function*.
 *
 * @example
 * // Function call
 * red('received')
 * green(`Hi number ${five}`)
 *
 * // Tagged template literal
 * red`received`
 * green`Hi number ${five}`
 *
 * @example
 * `expect(${red`received`})${name}(${green`expected`})
 *
 * Expected: "${green(expected)}"
 * Received: "${red(actual)}"`
 */

export const dyeRed: Colorizer = (...message) => colors.bg.red + colors.fg.black + m(message) + colors.reset
export const red: Colorizer = (...message) => colors.fg.red + m(message) + colors.reset
export const green: Colorizer = (...message) => colors.fg.green + m(message) + colors.reset

I have also tried implementing chaining like this colors.bg.red.fg.black('hi there') using proxies, but I have not quite finished the TS typings yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment