How to style console.log();

#javascript #webdev #react #tutorial

I guess that your first code of JS was

console.log('Hello World')

even, mine was the same 🤏

So, have you wondered about styling it? 🤔

nevermind...

I am going to take the Discord warning message into account as an example

Discord Console Warning Message

If you have ever opened developer tools in Discord, you will find this warning msg from Discord... Check it out right now if you haven't (and listennn, don't paste any malicious code there)
So let's recreate the same warning message
Write some necessary HTML to link a JS file to it
Create a JS file and name it whatever you want
Now follow the steps below

console.log(text, styling)

When you style there will be two things you need to take note of.

text - Every text message starts with a prefix - %c; and it is a very important thing and without it, styling will not apply to the text
styling - Simple CSS

Let's head up to the code,

console.log('%cHold Up', 'color: #404EED; font-size: 60px; font-weight: bold;-webkit-text-stroke: 1px black;');
console.log("%cIf someone told you to copy/paste something here you have an 11/10 chance you're being scammed", "color: black; font-size: 18px;")
console.log("%cPasting anything in here could give attackers access to your Discord account.", "color: red; font-size: 18px; font-weight: bold;")