Most developers today work with the terminal. It can be fun and extremely helpful to colorize the terminal output. I have seen a couple of articles using ANSI escape codes to colorize the console output.
The module colors.js and chalk are available on npm. These packages provide extremely easy to use wrappers that make colorizing console output fun.
Let’s get started with colorizing our console outputs with node packages.
But first, make sure you are in your project directory.
colors.js
Getting started with colors.js.
Installing colors.js
Let’s add the colors.js to your project:
# via yarn yarn add colors # via npm npm install colors
Now, within your script, require colors.js or use the ES6 import:
const colors = require # or import colors from 'colors'
Colorize Terminal Output with colors.js
With colors.js you are able to add text colors, brighten text colors, give background colors and brighten background colors.
Colorizing terminal output can be done in two ways with colors.js.
Super Nifty Way
const colors = require('colors') console.log('colorizing terminal with colors.js can be fun'.red) console.log('colors make the terminal lively.'.green)
Slightly Less Nifty Way
const colors = require('colors/safe') console.log(colors.red('colorizing terminal with colors.js can be fun')) console.log(colors.green('colors make the terminal lively.'))
Configuring Custom Theme
It is possible to configure your own custom theme with colors.js standard API.
Using Standard API
const colors = require('colors') colors.setTheme({ info: 'blue', warn: 'yellow', success: 'green', debug: 'cyan', error: 'red' }) console.log('ERROR: Something is wrong with your code'.error)
Using string Safe API
const colors = require('colors/safe') colors.setTheme({ info: 'blue', warn: 'yellow', success: 'green', debug: 'cyan', error: 'red' }) console.log(colors.error('ERROR: Something is wrong with your code'))
You can do more with colors.js custom themes. Check out their GitHub repository for more.
chalk
chalk package makes it easier to apply ANSI colors and styles to the terminal output.
Installing chalk
You can add chalk to your project using yarn or npm:
# via yarn yarn add chalk # via npm npm install chalk --save
Colorize Terminal Output with chalk
And within your script, require chalk with the code below:
const chalk = require('chalk')
chalk package gives you the power to change text color, background color, text styles and more.
Now, let’s try our hands on the wonderful features of chalk.
Changing Text Color with chalk
console.log(chalk.green('colorizing terminal with chalk can be fun'))
Changing Background Color with chalk
console.log(chalk.bgBlackBright('Text Background'))
However, it is possible to add background color and text color in a console output
console.log(chalk.bgCyan.red('Text with background'))
Styling with chalk
Styling works just like colorizing output, we can add it to the chain:
console.log( chalk.bgWhite.black.underline('Styling with chalk') )
We can perform more advanced colorizing with chalk to support other colors that are not part of their 16 color pairs.
console.log( chalk.hex('#421EDA').bgHex('#2534AD')('Advanced Colorizing') )
Conclusion
My aim is to introduce you to colors.js and chalk npm packages. You can do more with these packages than I have in this post. Just check out the colors.js and chalk repository for some more advanced steps.
You can also check out my post on Styling Console Messages.
No Comments
Leave a comment Cancel