Console/Terminal Messages styling done right. Introducing CHALK
Tags: webdev, terminal, styling, javascript
Published: 2020-05-27 17:40:09

Did you face a situation where you wanted to show console messages with different colors ?

Yeah it can be done easily in the browser!

example,On Chrome & Firefox you can add CSS in console.log messages

like this

```
console.log('%c%s','background: #c7c7c7; color: #fdfd10; font-size: 24px;' , 'This could be you warning message with Gray background');

console.log('%c%s','background: #222; color: #13ff1c; font-size: 24px;' , 'This could be you Success Message with black background');

```
![better console debug](https://dev-to-uploads.s3.amazonaws.com/i/hicy3l8s2uw7a4vhb7ap.png)


NICE....
![nice console](https://media.giphy.com/media/l0HTYUmU67pLWv1a8/giphy.gif)

You can wrap it as a function that takes the console message type and apply styling before logging that :-

```
const logMessage =(message, mType) =>{
  let color    = "black";
  let bgColor  = "white";
  let fontSize = "12px";
     switch (mType) {
         case "warning":  
              color = "yellow";
              bgColor = "Gray";
              fontSize ="30px";
              break;         
         case "info":     
               color = "gray";
               bgColor = "cyan";
               fontSize ="30px";
              break;
         case "error":   
              color = "red";
              bgColor = "blue";
              fontSize ="30px";
              break;
         case "success":  
              color = "green";
              bgColor = "pink";
              fontSize ="30px";
              break;
     }

     console.log(`%c${message}`, `color:${color}; background-color:${bgColor}; font-size:${fontSize};`)
}

logMessage('Test Warning Message:', 'warning')
logMessage('Test Info Message:', 'info')
logMessage('Test Error Message:', 'error')
logMessage('Test Message Success:', 'success')

```

![nice console](https://dev-to-uploads.s3.amazonaws.com/i/nnxec1x3roqfqve9b58a.png)

Another nice way to console complex data is to use the console.table:-
Lets say that you have an object and you wanna check it in the console in an understandable nice way then the console table is the answer

```
const employee ={name:"Ahmed",age:"36",country:"Jordan"};
console.table(employee); 
```

![table console of object](https://dev-to-uploads.s3.amazonaws.com/i/lh1za5zk1q6u6yx1jiqe.png)

OK ok... thats cool and nice but what about the terminal ?
![cool](https://media.giphy.com/media/l46C93LNM33JJ1SMw/giphy.gif)

Will Meet CHALK ,
https://www.npmjs.com/package/chalk
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w947mhc01sn9n935fd0b.jpeg)

A very nice npm package that allow you to style the console messages
it support nested styling.

really easy to use: just import the package and call chalk.neededColor
inside your console.log() statement
```
const chalk = require('chalk');
console.log(chalk.blue('Hello world!'));
```
it allows for a lot of stuff
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t35jyacg2znqb6pyofsh.png)

// Combine styled and normal strings
```log(chalk.blue('Hello') + ' World' + chalk.red('!'));```
 
// Compose multiple styles using the chainable API
```log(chalk.blue.bgRed.bold('Hello world!'));```
 
// Pass in multiple arguments
```log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));```
 
// Nest styles
```log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));```


Its Also allow you to define your own them , just like what did we do with our previous logMessage function

```
const chalk = require('chalk');
//define message type and reuse them whenever you want
const warning = chalk.bold.yellow;
const info = chalk.bold.blue;
const error = chalk.bold.red;
const success = chalk.bold.green;
 
console.log(warning('Warning!'));
console.log(info('Info!'));
console.log(error('Error!'));
console.log(success('Success!'));

```
here is an example of last message of my terminal today

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lrdmt7tlw2onytiznyy7.png)


I hope You Like it


![Alt Text](https://media.giphy.com/media/3o7qDEq2bMbcbPRQ2c/giphy.gif)