DEV Community

miku86
miku86

Posted on • Edited on

NodeJS: How To Colorize Text

#javascript #node #eli5

Intro

So we installed NodeJS on our machine.

We also know How to Get External Packages.

Now we want to learn how to colorize text using chalk.

Write a simple script

  • Open your terminal
  • Create a file named index.js: 
touch index.js
Enter fullscreen mode Exit fullscreen mode
  • Add this JavaScript code into it: 
// import chalk
const chalk = require('chalk');

// Example 1: inline styling, blue background and underline
console.log(chalk.bgBlue.underline('Example 1'));

// Example 2: create reusable style  
const success = chalk.bgGreen.black.underline;
console.log(success('Example 2'));

// Example 3: you can do a lot of stuff, e.g. using hex values and template literals
const customize = chalk.hex('#B4DA55').bold;
console.log(`This is ${customize('Example 3')}.`);
Enter fullscreen mode Exit fullscreen mode

Note: Chalk has a lot of available styles, read the docs of chalk.

Run it from the terminal

  • Run it: 
node index.js
Enter fullscreen mode Exit fullscreen mode
  • Result:

Alt Text

Further Reading

Questions

  • What is your favorite way/package to colorize text in Node? Why do you use it?

Top comments (2)

Collapse
 
avasconcelos114 profile image
Andre Vasconcelos •

I recently used the same thing to have color-coded logging on my node app :)

looks a little something like this:

function debug(message) {
    const timestamp = new Date().toString()
    console.log('\x1b[36m%s\x1b[0m', `${timestamp} - ${message}`)
}

function error(message) {
    const timestamp = new Date().toString()
    console.error('\x1b[31m%s\x1b[0m', `${timestamp} - ${message}`)
}
Collapse
 
miku86 profile image
miku86 •

Hey v 1 r t l & Andre,

thanks for your tips,
I will have a look at it.

If anyone is interested in further information:
various escape codes
bigger discussion on stackoverflow

Read next

husniddin6939 profile image

Vue JS props

Husniddin6939 -

stroiman profile image

Go-DOM - 1st major milestone

Peter Strøiman -

prince_beec5ccde00b7c6c73 profile image

Smart Screen Animation using html css and javascript

Prince -

gladiatorsbattle profile image

10 Hidden JavaScript Gems You Should Use in Every Project in 2024

Gladiators Battle -