Categories
JavaScript

Colorize Your Console.Log() 😳🤯

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.

1 reply on “Colorize Your Console.Log() 😳🤯”

Hey, Catalin! This looks really cool. Could you explain how the codes work? For example, why does appending ‘\x1b[31m’ to the beginning of the string make the output red?

Leave a Reply