Colorize Your Console.Log() 😳🤯

2020 Apr 21st

Are you bored of the usual console.log()? I do not know about you, but I like to spice up the things a little bit. Thus, what if I tell you that you can add colours to your console.log() statements?

Console.log() colorized

The above image shows different combinations of colours to make console.log() more interesting. Changing the colour might also make it easier to spot the information when you debug your application.

ALRIGHT, HOW DID YOU DO IT? 🤔

All it takes is to create a method which we will use inside console.log().

const colorize = (...args) => ({
    black: `\x1b[30m${args.join(' ')}`,
    red: `\x1b[31m${args.join(' ')}`,
    green: `\x1b[32m${args.join(' ')}`,
    yellow: `\x1b[33m${args.join(' ')}`,
    blue: `\x1b[34m${args.join(' ')}`,
    magenta: `\x1b[35m${args.join(' ')}`,
    cyan: `\x1b[36m${args.join(' ')}`,
    white: `\x1b[37m${args.join(' ')}`,
    bgBlack: `\x1b[40m${args.join(' ')}\x1b[0m`,
    bgRed: `\x1b[41m${args.join(' ')}\x1b[0m`,
    bgGreen: `\x1b[42m${args.join(' ')}\x1b[0m`,
    bgYellow: `\x1b[43m${args.join(' ')}\x1b[0m`,
    bgBlue: `\x1b[44m${args.join(' ')}\x1b[0m`,
    bgMagenta: `\x1b[45m${args.join(' ')}\x1b[0m`,
    bgCyan: `\x1b[46m${args.join(' ')}\x1b[0m`,
    bgWhite: `\x1b[47m${args.join(' ')}\x1b[0m`
});

Do not worry if you do not understand a thing. You do not have to understand it to use it. Use the method as follows:

console.log(colorize("Catalins.tech is the best!").black);
console.log(colorize("Catalins.tech is the best!").red);
console.log(colorize("Catalins.tech is the best!").green);
console.log(colorize("Catalins.tech is the best!").yellow);
console.log(colorize("Catalins.tech is the best!").blue);
console.log(colorize("Catalins.tech is the best!").magenta);
console.log(colorize("Catalins.tech is the best!").cyan);
console.log(colorize("Catalins.tech is the best!").white);
console.log(colorize(colorize("Catalins.tech is the best!").white).bgBlack);
console.log(colorize(colorize("Catalins.tech is the best!").cyan).bgRed);
console.log(colorize(colorize("Catalins.tech is the best!").magenta).bgGreen);
console.log(colorize(colorize("Catalins.tech is the best!").blue).bgYellow);
console.log(colorize(colorize("Catalins.tech is the best!").yellow).bgBlue);
console.log(colorize(colorize("Catalins.tech is the best!").green).bgMagenta);
console.log(colorize(colorize("Catalins.tech is the best!").red).bgCyan);
console.log(colorize(colorize("Catalins.tech is the best!").black).bgWhite);

No more boring console outputting. From now on, you can have fancy messages in your console. Give it a try and let me know how it goes!

By the way, you might be interested in the article I wrote today about the ternary operator in JavaScript. It is an interesting one! Have a look at it.