Chalk

Chalk beautifies your console’s output statements, including bolding, changing font colors, and changing font background colors. Mainly used to beautify the output messages and statements of related console tools.

Chalk usage

The version used for this tutorial is: 4.1.1

Official Address:github.com/chalk/chalk

Based on the sample

Output a blue text

const chalk = require('chalk');

console.log(chalk.blue('---- Hello Chalk ----'));
Copy the code

Chalk has three text manipulation modules: Modifiers, Colors, and Background Colors. These three can be combined to make a chain call. Style-dependent methods can be called in unordered combinations, such as the following two pieces of code, with the same effect:

console.log(chalk.bold.blueBright.underline('---- Hello Chalk ----\n'));
console.log(chalk.blueBright.bold.underline('---- Hello Chalk ----\n'));
Copy the code

If more than one color function is called, the one to the right prevails:

console.log(chalk.blueBright.bold.underline.blue.redBright('---- Hello Chalk 3----\n')); // Final output: redCopy the code

The official list of corresponding functions

Modifiers

  • Reset resets the style. This function must be placed last if it is a chained call.
const chalk = require('chalk'); console.log(chalk.bold.blueBright.reset('---- Hello Chalk ----')); // Output: ---- Hello Chalk ---- (without any style)Copy the code
  • Bold font
  • Dim makes the font glow slightly
  • Italic (not supported on Powershell)
  • Underline (not supported on Git bash)
  • Inverse reverses the background color and foreground color
  • Hidden Prints the text but makes it invisible
  • Strikethrough moves a horizontal line through the center of the text (not supported by Git bash or Powershell)
  • Visible prints text only if chalk’s color level is > 0. Useful for things that are purely decorative
console.log(chalk('---- Hello Chalk 6----'));
console.log(chalk.dim('---- Hello Chalk 6----'));
console.log(chalk.italic('---- Hello Chalk 7----'));
console.log(chalk.underline('---- Hello Chalk 8----'));
console.log(chalk.inverse('---- Hello Chalk 9----'));
console.log(chalk.hidden('---- Hello Chalk 10----'));
console.log(chalk.strikethrough('---- Hello Chalk 11----\n'));
Copy the code

Built-in Colors (Colors)

Chalk comes with 16 basic colors built in.

  • Black, black
  • Red red
  • Green, green
  • Yellow, yellow
  • Blue blue
  • Magenta magenta
  • Cyan blue
  • White white
  • I’m blackBright
  • It’s very red. It’s very bright
  • GreenBright bright green
  • YellowBright bright yellow
  • BlueBright bright blue
  • MagentaBright bright magenta
  • CyanBright bright green
  • WhiteBright bright white
console.log(chalk.magenta('---- Hello Chalk 12----'));
console.log(chalk.cyan('---- Hello Chalk 13----'));
console.log(chalk.blackBright('---- Hello Chalk 14----'));
console.log(chalk.redBright('---- Hello Chalk 15----'))
console.log(chalk.greenBright('---- Hello Chalk 16----'));
console.log(chalk.blueBright('---- Hello Chalk 17----'));
console.log(chalk.yellowBright('---- Hello Chalk 18----'));
console.log(chalk.magentaBright('---- Hello Chalk 19----'));
console.log(chalk.cyanBright('---- Hello Chalk 20----'));
console.log(chalk.whiteBright('---- Hello Chalk 21----'));
Copy the code

The following output is displayed:

Built-in background color

Chalk comes with 16 basic colors built in. Corresponding to the above font 16 colors, here is not a separate translation description

  • bgBlack
  • bgRed
  • bgGreen
  • bgYellow
  • bgBlue
  • bgMagenta
  • bgCyan
  • bgWhite
  • bgBlackBright
  • bgRedBright
  • bgGreenBright
  • bgYellowBright
  • bgBlueBright
  • bgMagentaBright
  • bgCyanBright
  • bgWhiteBright
console.log(chalk.bgBlack('---- Hello Chalk 12----'));
console.log(chalk.bgRed('---- Hello Chalk 12----'));
console.log(chalk.bgGreen('---- Hello Chalk 12----'));
console.log(chalk.bgYellow('---- Hello Chalk 12----'));
console.log(chalk.bgBlue('---- Hello Chalk 12----'));
console.log(chalk.bgMagenta('---- Hello Chalk 12----'));
console.log(chalk.bgCyan('---- Hello Chalk 13----'));
console.log(chalk.bgBlackBright('---- Hello Chalk 14----'));
console.log(chalk.bgRedBright('---- Hello Chalk 15----'))
console.log(chalk.bgGreenBright('---- Hello Chalk 16----'));
console.log(chalk.bgBlueBright('---- Hello Chalk 17----'));
console.log(chalk.bgYellowBright('---- Hello Chalk 18----'));
console.log(chalk.bgMagentaBright('---- Hello Chalk 19----'));
console.log(chalk.bgCyanBright('---- Hello Chalk 20----'));
console.log(chalk.bgWhiteBright('---- Hello Chalk 21----'));
Copy the code

The following output is displayed:

Using template Strings

Modules are separated by open curly braces ({), styles, some content, and close curly braces (}). Here is an example from the official website

const chalk = require('chalk');

const miles = 18;
const calculateFeet = miles => miles * 5280;

console.log(chalk`
	There are {bold 5280 feet} in a mile.
	In {bold ${miles} miles}, there are {green.bold ${calculateFeet(miles)} feet}.
`);
Copy the code

The following output is displayed:

Use RGB and HEX custom font colors, and bgRgb and bgHex custom background colors

Go straight to the sample code

console.log(chalk.rgb(9, 218, 158).bold('---- Hello Chalk 21 ----'))
console.log(chalk.rgb(9, 218, 158).visible('---- Hello Chalk 21 ----'))
console.log(chalk.hex('#09DA9E').visible('---- Hello Chalk 21 ----'))

console.log(chalk.bgHex('#09DA9E').visible('---- Hello Chalk 21 ----'))
console.log(chalk.bgRgb(9, 218, 158).visible('---- Hello Chalk 21 ----'))
Copy the code

Output result: