Coloring Your Terminal Using Nodejs

Learn how to output colors to your terminal using Nodejs

Chalk has been the most widely used library for adding color effects on our Node CLI project. Most people are unaware of how Sindre Sorhus implemented the library, so I decided to take my time out to write about it.

In this post, we will see how to write colors to our terminal using Nodejs.

The Color Codes

Each color (blue, red, green, cyan, etc) has a color code. To make a text to be any color, the text must be enclosed with the color code of the desired color. Below is the table of color codes:

We see the color codes for the major colors we have. Notice they all have two codes in the [] , the first is the code for the background color and the second is the code for the foreground color.

Tip: Easily reuse small modules across your JS projects

Use Bit to easily develop, isolate and publish small modules in your different projects. Don’t install entire libraries and don’t copy-paste code, when you can build faster with small reusable modules. Take a look .

Ramda components: Just collect and reuse components in your projects to build faster

Format for writing color codes to screen

Now that we’ve seen the color codes, let’s go over the format of writing text with colors:

\x1b[Color_code_backgroundmYour_text_here\x1b[Color_code_foregroundm

• Color_code_background : The first code in the [] array from the color code table.
• Your_text_here : The text you want to be colored.
• Color_code_foreground : The second code in the [] array from the color code table.

Notice the m ? it MUST be there otherwise the color will not appear. Most people do omit the m thinking its a typo error, no the m MUST be there.

Now, to write a text e.g nnamdi with the color blue. It will be like this:

console.log("\x1b[34mnnamdi\x1b[89m")

In the output, nnamdi will appear blue in color.

See the color code for blue is [34, 89] , so the first part will be \x1b[34m followed by my name nnamdi , then last \x1b[89m .

Looking at the color code section

We have different sections on the table. The first section holds the color code for the normal color.

yellow [33, 89]:

The first part will be \x1b[33m . The closing part will be \x1b[89m .

console.log("\x1b[33mnnamdi\x1b[89m")

The second section holds color codes for bright colors. The color codes will output color brighter than the normal color codes counterpart.

redBright: [91, 39]:

This will output a bright red color. The first part will be \x1b[91m and the second part: \x1b[39m .

console.log("\x1b[91mnnamdi\x1b[39m")

The third section holds color codes for background-color

bgBlack: [40, 49]:

This will output a black background color. The first part will be \x1b[40m and the second part: \x1b[49m .

console.log("\x1b[40mnnamdi\x1b[49m")

The fourth and last section holds the color codes for bright background colors.

bgBlackBright: [100, 49]:

This will output a bright black background color. The first part will be \x1b[1004m and the second part: \x1b[49m .

console.log("\x1b[100mnnamdi\x1b[49m")

Styling

We also have codes for styling our text in the terminal. Below is the table of codes for styling.

reset: [0, 0]:

This resets the active color to the default terminal color.

For example, if we do this:

console.log("\x1b[93mnnamdi\x1b[39m") // normal yellow color

This will output nnamdi in yellow color.

If we try outputting another text:

console.log("\x1b[93mnnamdi\x1b[39m") // normal yellow colorconsole.log("I am a developer")

The text I am a developer will be in yellow. Whenever you add a color code to console.log(...) or process.stdout.write(...) , it will set the terminal color to that particular code. So if we want to reset the color to default terminal color, we will use this color code.

Now, to reset the yellow color to the normal default color, we will do this:

console.log("\x1b[93mnnamdi\x1b[39m") // normal yellow color
console.log("\x1b[0m") // resets the yellow color to the default color
console.log("I am a developer") // will appear in white (the normal terminal color)

The above solution will cause a new line in the terminal and we might not want a new line. So we can attach \x1b[0m to console.log("\x1b[93mnnamdi\x1b[39m") // normal yellow color .

console.log("\x1b[93mnnamdi\x1b[39m\x1b[0m") // normal yellow color
console.log("I am a developer") // will appear in white (the normal terminal color)

bold: [1, 22]:

This is used to make our text bold.

console.log("\x1b[1mnnamdi\x1b[22m")

dim: [2, 22]

This makes text dim.

console.log("\x1b[2mnnamdi\x1b[22m")

italic: [3, 23]:

This outputs an italicized text.

console.log("\x1b[2mnnamdi\x1b[23")

underline: [4, 24]:

This will output an underlined text.

console.log("\x1b[4mnnamdi\x1b[24m")

inverse: [7, 27]:

This is used to invert a color.

console.log("\x1b[mnnamdi\x1b[27m")

hidden: [8, 28]:

This hides a character or text.

console.log("\x1b[8mnnamdi\x1b[28m")

strikethrough: [9, 29]:

This outputs a text with a line drawn in the middle.

console.log("\x1b[9mnnamdi\x1b[29m")

Combining color with styles

We can combine colors and styles to produce an effect.

We can make a yellow bold text. Easy, we know that the color code for yellow is [33, 89] and bold text is [1, 22].

First, we wrap our text with yellow color code:

\x1b[33mnnamdi\x1b[89m

Then we wrap the above with bold color code:

\x1b[1m\x1b[33mnnamdi\x1b[89m\x1b[22m

This will output a bold yellow text.

Creating a color library

We will find it often tedious to write the \x1b[Xm to output a color or style. To make it easy let’s create a color library, that will enable us to write colors via simple APIs like this:

console.log(color.blue("nnamdi")) // outpts blue `nnamdi`
console.log(color.bold.yellow("chidume")) // outputs bold yellow `chidume`

Either share it as a component using Bit — see the example:

Learn more about it here:

Or configure it as a package for NPM:

First, we scaffold a Node project:

mkdir nzu
cd nzu
npm init -y

Create a lib folder, that is where our files will reside.

mkdir lib

Create cs.js file, this will hold the color/style codes: touch lib/cs.js .

This file exports colors and styles.

Next, we create lib/nzu.js , this is our main file: touch lib/nzu.js .

Now, change the main property value in package.json to this:

{
 main: "lib/nzu.js"
}

Now, we can publish our library to the npm registry npm publish or locally npm link and use the library like this:

const nzu = require('nzu')console.log(nzu.blue("nnamdi")) // outpts blue `nnamdi`
console.log(nzu.bold.yellow("chidume")) // outputs bold yellow `chidume`

Conclusion

We have seen how to output color and style our text in the terminal. So, next time you see @angular/cli , create-react-app or any other famous CLI tool outputting stylish and colorful text, you won't have to be perturbed because now, you know how it works.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email or DM me.

Thanks !!!