-
-
Save abritinthebay/d80eb99b2726c83feb0d97eab95206c4 to your computer and use it in GitHub Desktop.
// 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" | |
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.
It works in every shell stdout I think
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);
// }
};
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.
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.
\x1b[1m - is not bright font. It is bold font.
Please add \x1b[3m. It is cursive font.