JavaScript chalk
last modified October 18, 2023
In this article we show how to style text in JavaScript using the chalk module.
The chalk is a Node.js module which is used for styling the format
of text and allows us to create our own themes.
Note that the terminal may not support all of the features of the chalk module.
JS chalk simple example
The following example is a simple demonstration of the chalk module.
import chalk from 'chalk';
console.log(chalk.blue('an old falcon'));
console.log(chalk.keyword('steelblue')('an old falcon'));
console.log(chalk.keyword('khaki').bold('an old falcon'));
We print three coloured texts to the terminal.
console.log(chalk.blue('an old falcon'));
With chalk.blue, we output text in blue colour.
console.log(chalk.keyword('steelblue')('an old falcon'));
With keyword, we can use a name of the colour.
console.log(chalk.keyword('khaki').bold('an old falcon'));
The chalk supports chainable API; the text is shown in bold khaki.
JS chalk basic text colours
The chalk module has functions for basic text colours.
import chalk from 'chalk';
console.log(chalk.red('An old falcon'));
console.log(chalk.blue('An old falcon'));
console.log(chalk.green('An old falcon'));
console.log(chalk.cyan('An old falcon'));
console.log(chalk.white('An old falcon'));
console.log(chalk.redBright('An old falcon'));
console.log(chalk.greenBright('An old falcon'));
In the example, we output text in basic colours.
console.log(chalk.red('An old falcon'));
We output text in red colour.
console.log(chalk.redBright('An old falcon'));
Here we output text in bright red colour.
JS chalk background colours
We can change the colour of the text background.
import chalk from 'chalk';
console.log(chalk.bgRed('An old falcon'));
console.log(chalk.bgBlue('An old falcon'));
console.log(chalk.bgWhite.blue('An old falcon'));
console.log(chalk.bgWhiteBright.red('An old falcon'));
console.log(chalk.bgHex('#456323')('An old falcon'));
In the example, we change the background colour of the output.
console.log(chalk.bgRed('An old falcon'));
With bgRed, we change the background colour to red.
console.log(chalk.bgWhite.blue('An old falcon'));
We change the background colour to white. Since the default text colour is also white, we change it to blue.
console.log(chalk.bgHex('#456323')('An old falcon'));
We can select our custom background colour with bgHex.
JS chalk colour modes
In chalk, we can use several colour modes.
import chalk from 'chalk';
console.log(chalk.rgb(232, 34, 122)('An old falcon'));
console.log(chalk.hex('#943255')('An old falcon'));
console.log(chalk.ansi(245)('An old falcon'));
console.log(chalk.hsv(125, 8, 61)('An old falcon'));
In the example, we use the RGB, HEX, ANSI, and HSV modes.
JS chalk modifiers
The chalk supports several modifiers including bold, italic, and underline.
import chalk from 'chalk';
console.log(chalk.bold('An old falcon'));
console.log(chalk.dim('An old falcon'));
console.log(chalk.italic('An old falcon'));
console.log(chalk.underline('An old falcon'));
console.log(chalk.inverse('An old falcon'));
console.log(chalk.strikethrough('An old falcon'));
console.log('----------------------');
console.log(chalk.bold.italic('An old falcon'));
console.log(chalk.dim.italic('An old falcon'));
The example uses several chalk modifiers. These can be also combined.
For instance, chalk.bold.italic creates a bold and italic text.
JS chalk template literals
The chalk module can be used within template literals. Template literals are string literals allowing embedded expressions. The expressions in the placeholders and the text between the backticks (` `).
import chalk from 'chalk';
console.log(`${chalk.red('old falcon')}`);
console.log(`${chalk.blue('old falcon')}`);
console.log(`${chalk.dim.underline('old falcon')}`);
In the example, we output three lines using chalk and JS template literals.
JS chalk tagged template literals
Tagged template literals are more advanced form of template literals.
import chalk from 'chalk';
console.log(chalk`{red old falcon}`);
console.log(chalk`{blue old falcon}`);
console.log(chalk`{dim.underline old falcon}`);
The example uses the chalk module in conjunction with the tagged template literals.
Source
In this article we have styled text in JavaScript with the chalk module.