Style console.log() output with CSS - Part 2

This video is part 2 of How to style console.log() output with CSS. In this video, I am going to explain about how can we create a generic logic so that we can easily style console log output and do it a bit faster.

Issue Faced

So, right now in order to apply a css styling to multiple console.log() output, we would do something like this:

console.log("%cSome text here 1", "color:green" ); console.log("%cSome text here 2", "color:red" ); console.log("%cSome text here 3", "color:blue" ); console.log("%cSome text here 4", "color:green" ); console.log("%cSome text here 5", "color:red" ); console.log("%cSome text here 6", "color:blue" ); 

You can see in the above examples, only the console log text is changing and the style is being repeated multiple times. I think we can create a generic logic and just call few functions and pass the text as a parameter to those functions and that would handle the styling for us.

Solution

So first, we will create a main logColor function:

function logColor(color, args) { console.log("%c" + args.join(" "), "color:" + color); } 

Then we will create a generic log object:

const log = { green: (...args) => logColor("green", args), red: (...args) => logColor("red", args), blue: (...args) => logColor("blue", args), }; 

and then we can call it like:

log.green("Some text here 1"); log.red("Some text here 2"); log.blue("Some text here 3"); 

As you can see, we can now use these methods anywhere in your project without typing %c (CSS format specifier) and color name part every time. Yay!

Please check out this video where the solution for this issue is explained in full details:

Wrap Up

I hope you will find this video useful and learn something new in the process. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, please make sure to subscribe on YouTube.

Happy Coding!