How to Highlight A Terminal Output with Node.JS using Chalk

By Raddy in NodeJs · 12th July 2021

In this article, we are going to explore another popular NPM package called Chalk. Simply put, Chalk allows us to do Terminal styling and the main reason that you might want to use Chalk in your next Node.Js project is to simply emphasise an output or just make the terminal output look a little bit better.

As of writing this article, Chalk has 95,655,785 Weekly Downloads!

Create A Simple Node.JS App to Test Chalk

Let’s start by creating a new Node.JS Project. To do that, create a new project folder and then run the following command in Command Line (Mac / Linux) or Powershell (Windows).

npm init

This will initialise a new project for you and it’s going to ask you a few questions about your project. The most important one is to give your package a name and then you can just keep pressing enter until the installation is over.

At this point, you should see a file called package.json in your project folder.

Dependencies Installation

The only dependency or NPM package that we need for this project is Chalk. You can add Nodemon if you don’t want to keep restarting the server manually. Let’s install both:

[x] Nodemon
[x] Chalk

Open the Command Line / Terminal / Powershell and install Chalk:

npm install chalk

Now let’s install nodemon. The reason that we are installing nodemon separately is that nodemon is a development dependency.

npm install nodemon --save-dev

Your packages.json file should look similar to this:

{
  "name": "node.js-chalk",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.11"
  }
}

Note that the version of the dependencies might change in the future (most likely will).

Project Structure

Our project is going to be simple. We just want to explore Chalk. All we need to do is to create an App.js file and we need to modify our package.json file to run with Nodemon.

📂 node_modules
🌍 app.js - create this file
📜 package-lock.json
📜 package-json

Nodemon Setup

Let’s tell Node.JS to start our App.js file with Nodemon. To do this, open the package.json file in your favourite editor and add another line under the scripts object just like in the example below:

{
  "name": "node.js-chalk",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js" // Add this line
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.11"
  }
}

You can call it dev, start or whatever you like.

Now we need to create our Hello World app and display something colourful in our console.

Simple Hello World App

Let’s create our app.js file and each block of code will be explained as a comment:

// Include Chalk
const chalk = require('chalk');

// Display Hello World in the console
console.log(chalk.blue('Hello world!'));

That’s pretty much it! It’s that easy, but we’ll cover a few more options below. Before we cover the other options let’s run our app and see what we get.

Run App.js

To run your application, open the Command Line / Terminal / Powershell and type the following command:

npm start

This should run the application with Nodemon and hopefully at this point you should get a message of “Hello World” highlighted in blue just like in the image below:

Now that we’ve created a very simple app we can start exploring Chalk. Their NPM documentation is full of examples, but I want to cover the basics here.

Colour Methods

Here is a list of the Colour Methods that you can use:

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

And now let me show you a few examples of how you can use them:

const chalk = require('chalk');

console.log( chalk.red('red') );
console.log( chalk.blue('blue') );
console.log( chalk.green('green') );
console.log( chalk.magenta('magenta') );

And here is the output in the VSC Terminal:

Background Methods

To use the background methods we pretty much just need to add “bg” as background in front of each colour and capitalise the colour. Here is the official list:

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

Example:

const chalk = require('chalk');

console.log( chalk.bgBlack('black') );
console.log( chalk.bgRed('red') );
console.log( chalk.bgGreen('green') );
console.log( chalk.bgYellow('yellow') );
console.log( chalk.bgBlue('blue') );
console.log( chalk.bgMagenta('magenta') );

Output:

Modifiers

There are methods of displaying text with different styles such as italic, bold and strikethrough. Here is the full list of the modifiers that we can use:

• reset – Resets the current color 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 colors.
• hidden – Prints the text, but makes it invisible.
• strikethrough – Puts a horizontal line through the center of the text. (Not widely supported)
• visible– Prints the text only when Chalk has a color level > 0. Can be useful for things that are purely cosmetic.

const chalk = require('chalk');

console.log(chalk.bold('bold'));
console.log(chalk.dim ('dim '));
console.log(chalk.italic ('italic'));
console.log(chalk.underline ('underline'));

Output:

Using hex Colours

const chalk = require('chalk');

console.log(chalk.hex('#0BB5FF')('Police strobe blue'));

Output:

Using RGB values

const chalk = require('chalk');

console.log(chalk.rgb(0,191,255)('I am blue da ba dee da ba die'));

Output:

Define Custom Styles

const chalk = require('chalk');

customStyle = chalk.underline.red; 
console.log(customStyle('Custom red underlined text.'));

Output

As you can see Chalk is a pretty cool, easy to use lightweight terminal styling tool that many people seem to love. Do you use Chalk or at least are you planning to use it in your next project? Let me know in the comments below.

Tips are never expected, but deeply appreciated if you are able. It helps me create more content like this.

Thank you for reading this article. Please consider subscribing to my YouTube Channel.

Credit:

• Photo by Andras Vas on Unsplash
• Chalk Official Documentation

More Resources:

• How to use environment variables with Node.js – dotenv tutorial
• Create Responsive Side Navigation using TailwindCSS & AlpineJs
• AWS LightSail Fix WordPress File permissions
• Build Simple REST API With NodeJs, ExpressJs And MongoDB
• Step-by-Step Guide to Migrate Your WordPress Site to AWS Lightsail

Author

Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]

Previous Post in Category

Next Post in Category