How to make colorful console using npm Chalk

maxresdefault 5

In this blog, we are going to use the npm chalk to make our console colorful and beautiful. This package is purely built for the purpose of the console colorful logs in the terminal. The package can be installed using the command npm install chalk.

After installing you can import or require in your project.

const chalk = require(‘chalk’)

 console.log(chalk.color_name(“String to be printed in terminal”));

Example-:

npm Chalk

Here, the list of color_name  supported by the chalk package. Colors that can be specified through keywords are:

black,red, green, yellow, blue, magenta, cyan, white, blackBright (alias: gray, grey), redBright, greenBright, yellowBright, blueBright, magentaBright, cyanBright, whiteBright.

We can also add color in text background,

Example-:console.log(chalk.bg<Color>(“String to be printed in terminal ”));

npm Chalk

The list of background colors supported by chalk are

bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bgBlackBright (alias: bgGray, bgGrey), bgRedBright, bgGreenBright, bgYellowBright, bgBlueBright, bgMagentaBright, bgCyanBright, bgWhiteBright.

We can also modify our text, such that bold, italic, etc

Example:-console.log(chalk.<modifier>(“String to be printed in terminal ”));

npm Chalk

The list of modifiers used to modify the text to the styles which are supported by npm chalk are

  • reset – Resets the current colour chain.
  • bold – Make text bold.
  • dim – Emitting only a small amount of light.
  • italic – Make text italic. (Not widely supported)
  • underline – Make text underline. (Not widely supported)
  • inverse– Inverse background and foreground colours.
  • hidden – Prints the text, but makes it invisible.
  • strikethrough – Puts a horizontal line through the centre of the text. (Not widely supported)
  • visible– Prints the text only when Chalk has a colour level > 0. Can be useful for things that are purely cosmetic.

Have you thought about chaining all properties in chalk to make better output? yes, we can chain all properties. look at the below example.

Example:-console.log(chalk.yellowBright.bgRed.bold(“Styled text”));

npm Chalk

We can also define our own themes.

const error = chalk.bold.red;
const warning = chalk.yellowBright

console.log(error(‘Error!’));
console.log(warning(‘Warning!’));

Let’s see an example, how to make our own themes and use them across our project

npm Chalk

 

Chalk.level

Setting the level property you can override the colour. Basically, it is supported automatically by chalk. You should however only do this in your own code as it applies globally to all Chalk consumers.

There are 4 levels of colour support for npm chalk.

Level Description
0 All colours disabled
1 Basic colour support (16 colours)
2 256 colour support
3 Truecolor support (16 million colours)

supports color

Detect whether your terminal supports color. colour can be overridden  by using flags --color and --no-color. You can forcefully  use colour by using FORCE_COLOR=1 (level 1), FORCE_COLOR=2 (level 2), or FORCE_COLOR=3 (level 3) to forcefully enable colour, or FORCE_COLOR=0 to forcefully disable.

Template literals:

suppose we want to print only some part of the string colourful. We can define styles by using template literals and then using chalk to make them colourful.

npm Chalk

 

This npm package truly went to the front when the shortages good terminal c were uncovered. To sum up, this is an exceptionally flexible and simple to utilize chalk to style your control centre. This bundle likewise draws near to 50M downloads each week! All things considered, which is all well and good. With the components depicted over, it’s hard to dislike and utilizes this bundle! Happy coding!

If you are interested in such a blog then please do subscribe to our blog for the upcoming blog.

If you are interested in Javascript Topic then try Reading Array Destructuring | Spread Operator | Rest Operator | Javascript

Some links related to chalk.

https://www.npmjs.com/package/chalk
https://npmcompare.com/compare/chalk,cliff,colors

Be the first to comment on "How to make colorful console using npm Chalk"

Leave a comment

Your email address will not be published.


*