logoNavigate back to the homepage
ARCHETYPER

Chalk

BM

·

 
July 17th, 2020 · 3 min read

Chalk

Overview

Here is something to make your console look groovy and colorful! Yes, in this article we are going to go through the npm package chalk which aids in styling your terminal in a very easy and quick way!!

This packages is solely built for the purpose of the console and how we can visualize whatever it logs. The package can be installed using the command npm install chalk. Let’s look at what this package offers.

Highlights

To start off with, let us look at how we can include this package in our code. Very simple to do so, just using the line:

1/* babel or ES6 */
2import chalk from 'chalk';
3/* node or require js */
4const chalk = require('chalk');

Coloring your words:

1console.log(chalk.color_name(“Your text”));

Here, the color_name is the color you want to style your text. Colors which 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.

Adding background colors:

1console.log(chalk.bg<Color>(“Your text”));

The bgColor can be modified to have different background colors to your text. The various readymade background colors are:

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

Adding Modifiers:

1console.log(chalk.<modifier>(“Your text”));

The modifiers are used to modify the text to the styles we specify. The supported modifiers are:

reset, bold, dim, italic, underline, inverse, hidden, strikethrough, visible.

Now that we have gone through the basic styling, let us look at the real power of using this module:

Chainable API:

Chalk allows us to chain multiple styles in the same statement. Example:

1console.log(chalk.magenta.bgGreen.bold(“Styled text”));

Console.log:

chalk 1

The above line would have magenta colored text, with a green background and would be bold in nature. In the case of a conflict, the last specified style is used, that is, chalk.red.blue is effectively chalk.blue.

Chalk levels:

There are 4 levels of color support for chalk. The levels can be set using the ‘level’ property.
0 - All colors disabled
1 - Basic color support (16 colors)
2 - 256 color support
3 - Truecolor support (16 million colors)

1const chalk_level_def = new chalk.Instance({level: level_value});

Chalk support for stderr:

For the stderr stream, there is a separate definition of chalk and is defined by chalk.stderr.

Defining our own themes:

We can define our own themes and use them across our code.

1const my_own_theme = chalk.italic.bgYellow.blue;
2console.log(my_own_theme(“This text is in italic, has a background of yellow and is blue in color!”));

Console.log:

chalk 2

One good example to utilize the power of having custom themes can be demonstrated in the usage of log levels -

1const error_theme = chalk.red;
2const warning_theme = chalk.hex('#FFFF00');
3const info_theme = chalk.white.bold;
4const debug_theme = error_theme.bold;
5const trace_theme = debug_theme.underline.bgBlack;
6
7console.log(error_theme('ERROR: This text is from the error theme'));
8console.log(warning_theme('WARNING: This text is from the warning theme'));
9console.log(info_theme('INFO: This text is from the info theme'));
10console.log(debug_theme('DEBUG: This text is from the debug theme'));
11console.log(trace_theme('TRACE: This text is from the trace theme'));

Console.log:

chalk 3

Each log level has been assigned a specific template. If you can see from the above code, it is possible to chain attributes to custom themes as well. That is, in -

1const debug_theme = error_theme.bold;
2const trace_theme = debug_theme.underline.bgBlack;

debug_theme and trace_theme have been defined by chaining extra styles bold and underline.bgBlack respectively to the user defined custom themes created error_theme and debug_theme instead of rewriting the whole chain of styles. This surely reduces some redundancy.

Color support:

One of the most important features of chalk is the support of 256 and Truecolor color. On terminals which support 256 and Truecolor color, chalk can be used to define any possible color we want in the various models it supports:

rgb, hex, keyword, hsl, hsv, hwb, ansi, ansi256.

This means, we can define a string with a red color like:

1chalk.red(“Text”);
2chalk.rbg(255,0,0)(“Text”);
3chalk.hex(‘#FF0000’)(“Text”);

Console.log:

chalk 4

As you can see, all three texts are printed in red.

Template literals and tagged template literals:

We can define styles using template literals and chalk can be used as a tagged template literal.

1tagged template literal - console.log(chalk`This text is {underline.hex('#FF5349') orangish! :P}`);
2template literal - console.log(`This text is ${chalk.blue("Blue!")}`);

Console.log:

chalk 5

Other important features include the ability to have multiple arguments in the chalk function and to use the chalk function in string substitution.

Evaluation Metrics

CategoryRatingsDeliberations
Ease of useGoodZero dependencies, easily useable, very clean package
CommunityGoodFrequent updates, used by roughly 50k packages, few outstanding issues, Actively maintained
Active usageGoodClose to 50M weekly downloads at the time of writing
VulnerabilitiesGoodNo vulnarablities seen or raised.
Docs and TrainingsGoodExtensive examples provided. Official docs are elaborate.

Conclusion

This package really came to the fore when the shortfalls of colors.js were exposed. Chalk doesn’t extend String.prototype which avoids causing a whole bunch of problems! To summarize, this is a very versatile and easy to use package to style your console. This package also gets close to 50M downloads per week! Well, rightly so. With the features described above, it’s difficult to not like and use this package! Hope you’ve got a good insight into the features of Chalk. Happy coding!

Check out the package and some reading materials

Disclosures

The content and evaluation scores mentioned in this article/review is subjective and is the personal opinion of authors at Unpackaged Reviews based on everyday usage and research on popular developer forums. They do not represent any company’s views and is not impacted by any sponsorships/collaboration.

Header Photo by Peter Feghali on Unsplash

More articles from Unpackaged Reviews

Dotenv

Simple way to set the right environment for your application!

July 1st, 2020 · 2 min read

Husky

An easy way to git-hooked!

July 1st, 2020 · 2 min read
© 2020-2021 Unpackaged Reviews
Link to $https://twitter.com/unpakgd_reviewsLink to $https://unpackaged-reviews.medium.com