The normal stuff
The basics for the console.log()
in JavaScript is just this:
console.log("Hello World!");
Adding styles
But did you know that you can stylize the text you are logging? To add styles to the text you just need to add %c
to the beginning of the text that you want to style. For an example of this in action, this is the welcome message for Developer Bacon.
console.log(
"%cWelcome to the console of developer bacon",
"color:pink;text-transform:uppercase;font-weight:bold;"
);
Adding more styles
To add more styles to other text in the same console log you need to add the %c
just before the second group of text. You can add as many of these indicators as you want you just need to add a new style group for each text group. Here is an example of multiple styling groups in action.
console.log(
"%cThis text will be bold. %cThis text will be red. %c This text will be small",
"font-weight:bold;",
"color:red;",
"font-size:8pt"
);
Originally posted on developerbacon.ca
Top comments (9)
Nice! I created a project some time ago I have used in my last projects.
Maybe could interest to you: github.com/codevor/logger.js
looks great, def trying it!
Thanks! It's opened to contributions ✌🏻
Thanks, I like you project I might use it in the future
Cool!
Whoa I had no idea you could do this! Great post!
Wow that's nifty!
Fireship made a pretty good video on console.log, here's the link :
youtube.com/watch?v=L8CDt1J3DAw
Man i am getting really tired of all this clickbait titles 😣
"How to add styles to console.log" would be more precise and useful