Make Console.log() output colorful and stylish in browser & node

While writing a code once i felt the need of console.log( ) outputs with color variations. I wanted the errors to come up in red and warnings in Yellow. Is it possible?
Well definitely it is. And not only colors, you can also specify text size, background color etc.
Styling can be done in both node and browser with a little bit of code modification. In this article i will discuss about both of them in details. But if you aren’t looking to dive that deep i am also providing an cheat sheet.

Changing Font Color In Node:

i  am cyan

Changing Font Color In Browser:

first brorser example

Colorful & stylish console.log() in Node.js

You can customize the node’s console.log() output in two different ways. One option is, using the native code, which can be a bit less readable; another is simply using an npm package which can reduce your pain a bit.

The native way

Simple use an escape sequence \x1b followed by a style code [33m and then your string argument.
It is recommended to use \x1b[0m to reset the terminal color else the terminal will take the last given color value. Below are the list of codes you can use to style your node console.

without npm package

Using an npm package

By using colors package one can easily customize the styles in node console. Unlike the native way, using colors is pretty simple and all you need to do is to write some human readable code. Below are the examples.

Text Colors
You can use 10 different text colors mentioned below.

-black
-red
-green
-yellow
-blue
-magenta
-cyan
-white
-gray
-grey

text color in library

Background Color
There are 8 background color available in this library.

-bgBlack
-bgRed
-bgGreen
-bgYellow
-bgBlue
-bgMegenta
-bgCyan

npm package bg color

Styles
You can choose different text writing styles too like,

-reset
-bold
-dim
-ilatic
-underline
-inverse
-hidden

style in npm pcg

Extras
Some other keywords you can use while customizing.

-rainbow
-zebra
-america
-trap
-random

extra npm pcg style

Remember the output style of random can’t be assumed.

Style & Color in browser’s Console.log output

You can use more variations in console.log() if you are in the browser. You can simply use CSS properties and modify accordingly.

For every different string (separated by %c), there will be some CSS property quoted & defined sequentially.

Hope a simple example will clear all your doubt,

consol.log in browser

You can use various CSS properties to customize your console output. Some of them mentioned below:

* font-family*

Syntax: font-family: arial

You should provide more than one font-family, if the browser doesn’t support the first font it will try the next one.

font family

font-size

Syntax font-size: 10px

You can use em unit too. For an example, 40px= (40/16)= 2.5em. Or even percentage (%) is fine. Just like normal css.

font size

font-style

Syntax font-style: italic

italic

font-weight

Syntax font-weight: bold

font weight

font-variant

Syntax font-varitan: small-caps

font variant

text-decoration

Syntax text-decoration: overline

text-decoration

text-transform

Syntax text-transform: uppercase

text transform

line-height

Syntax line-height: 3

line height

text-shadow

Here 3px is the position of the horizontal shadow and 2px is the position of the vertical shadow.

text shadow

About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorophobic.