Web Tech
How to make console.log() colourful

How to make console.log() colourful

Antariksh Verma's photo
Antariksh Verma
·

6 min read

Have you ever wondered about the boring colour of console.log(), I bet you have. I mean the blackness (or white) of the text does not signify anything. What if you are making a logging module for JavaScript and are using console.log(). What if you need to have the console log something in the colour red because of an error. You could use a library like colors or something. But today, we will make that kind of a library from scratch. That is right, today your dream will come true. This post will not cover publishing npm package. That will be in a separate post (most likely the next). And you need npm and node to move forward. Plus, the code for this post will be on GitHub at my GitHub repo.

Before we start to make our npm package/module, we need to understand the theory behind a colourful console.log(). Node JS interprets the text inside console.log() as normal ASCII text. What JavaScript normally does is that it has built in colour codes which you can use to style the text returned from console.log(). Coming back to Node JS, since it interprets it as ASCII text, whatever we input will just be logged onto the console as it is. To prevent that, we can use a simple escape sequence, \u001b, this means that whatever will be followed now will be interpreted as a byte sequence. So now if we input a colour code, the text from console.log() will be styled. Below are the different colour codes for foreground and background.

  • Foreground Black = [30m
  • Foreground Red = [31m
  • Foreground Green = [32m
  • Foreground Yellow = [33m
  • Foreground Blue = [34m
  • Foreground Magenta = [35m
  • Foreground Cyan = [36m

  • Foreground White = [37m

  • Background Black = [40m

  • Background Red = [41m
  • Background Green = [42m
  • Background Yellow = [43m
  • Background Blue = [44m
  • Background Magenta = [45m
  • Background Cyan = [46m
  • Background White = [47m

We will use these as reference to create functions just like the popular library, colors does. We will create different functions which can be passed through the console.log() like this, console.log(myFunction()), the myFunction() will take a string as a parameter. The string will be the string we want to be logged out in the console. Let us start by making a few foreground functions. Start with the command, npm init, this will give you some choices, if you know what you are doing then continue but otherwise choose all the default setting. This command will create a node project for you. Create a folder named, src and in that, a file named, foreground.js, which will contain our foreground colour functions.

Let's start by creating the first function, colourBlack. Add the following code in the file:

function foreColourBlack(text) {
    return ${`\u001b[30m${message}\u001b[30m`}
}

Now you can copy the above function for all the foreground colour codes. After all the functions are written, write the following code:

module.exports = {
    foreColourBlack
}

In the above piece of code you can add all the functions you have written since that piece of code exports all the functions meaning that we can use the functions in another file.

Create a file named, background.js where you can paste the same code as the one in foreground.js. Except, all the colour codes need to change to the background colour codes. Again as we did before export those functions.

Now create a new file named, index.js where we will collate all the function we created before. Add the following code in the file:

const foreColourBlack = require('./foreground.js')

You can import all of your background as well as foreground functions like that. Then, create an object with the functions like this:

const foreground = {
    foreColourBlack
}

Do the same as above for the background colour functions as well. After that export the objects like this:

module.exports = {
    foreground,
    background
}

Now we are ready to publish our very own and very first NPM package and JavaScript library. Now before we get into production, make sure to test it and if you can as a bonus, write a unit test with some library or framework.

That was it for this post and publishing NPM package will be covered in the next post so watch out for that and if you face any problem, small or big, just comment down and I will try and answer every question and problem you face. Thank you and if you learnt something then react to this post.

consoleloggingJavaScriptNode.jsbrowser