As a failed graphic designer, the importance of readability has always been emphasized during my course. If your users can't read something clearly, that's a problem!
I was in the midst of an assignment where we had to make a console program mimicking a deli line. I noticed that I had a hard time keeping up with the many console.logs I had to do. So I wondered.. How can I make this more readable?
Upon searching I found a set of functions that allow you to change all sorts of things within your terminal’s console.log functions. These series of functions look something like this:
console.log("\x1b[93m\x1b[3m%s\x1b[0m", "Phrase")
// displays "Phrase" in yellow and italic
I know, I know, this looks crazy! Let’s break it down.
We first need to use an escape sequence to tell our terminal “get ready to receive some info!” We do so by typing \x1b. This is called an ANSI escape sequence. \x1b is ANSI for your escape key. This is sort of equivalent to using the escape character “\” in JavaScript strings.
After we use our ANSI escape sequence, we then tell our console we are going to introduce a function. We do this with using the [ key. This is a Control Sequence Introducer(CSI)
After our CSI, we then list some parameters (in this case, numbers) that our function will take in. This is where we think about what we want our styling to be. These will be parameters to our function called m, which is the Select Graphic Rendition (SGR) function. Below is a list of parameters you can check out.
| parameter | description |
|---|---|
| 0 | reset console styling |
| 1 | bold or increased intensity (depending on settings) |
| 3 | italic |
| 4 | underline |
| 7 | reverse colors |
| 8 | hidden |
| 9 | strike-through |
| 30-37 | Set font color from basic palette |
| 38 | Set font color from 256-color/24-bit palette: use 38:5:# to pick from 256-color table or 38;2;r;g;b to pick from 24-bit colors. (using RGB) |
| 40-47 | Set background color |
| 48 | Set background color from 256-color/24-bit palette: use 48:5:# to pick from 256-color table or 48;2;r;g;b to pick from 24-bit colors. (using RGB) |
| 90-97 | Set bright font color |
| 100-107 | Set bright background-color |
To view the colors you can use, check out the color table at Wiki https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit .
We can chain multiple styles together by appending \x1b and another style code/function. For example I would use \x1b[96m\x1b[9m For a bright Cyan Strike-through console log.
After we finish our styling codes, we need to tell the terminal what we want to appear as our message. We can do this two ways. One way is by adding your text directly after the styling codes like this (we’ll discuss what the ending \x1b[0m means in a bit):
console.log("\x1b[48;5;49mMint Background\x1b[0m")
Or we can use the ‘placeholder’ %s and pass a second string argument in console.log, like this:
console.log("\x1b[48;5;49m%s\x1b[0m", "Mint Background")
- Important note, once you are finished with your styling, your terminal does not know where to terminate them. So we must reset the style using
\x1b[0mat the end of your string or placeholder to reset your console to its default settings.
And there you have it, fancy terminal console logs for your next project!
Below is a screenshot of what the different colors look like in my console in VSCode and Windows terminal.
Use the code below to see how these look like in your terminals, have fun!
console.log("\n\n")
console.log("***** BASE TERMINAL EXAMPLES *****\n")
console.log("- \\x1b[0m", " | \x1b[0mReset\x1b[0m")
console.log("- \\x1b[1m", " | \x1b[1mBold/Bright\x1b[0m")
console.log("- \\x1b[3m", " | \x1b[3mItalic\x1b[0m")
console.log("- \\x1b[4m", " | \x1b[4mUnderline\x1b[0m")
console.log("- \\x1b[7m", " | \x1b[7mReverse\x1b[0m")
console.log("- \\x1b[8m", " | \x1b[8mHidden\x1b[0m - hidden")
console.log("- \\x1b[9m", " | \x1b[9mStrike-through\x1b[0m")
console.log("- \\x1b[30m", " | \x1b[30mBlack\x1b[0m")
console.log("- \\x1b[31m", " | \x1b[31mRed\x1b[0m")
console.log("- \\x1b[32m", " | \x1b[32mGreen\x1b[0m")
console.log("- \\x1b[33m", " | \x1b[33mYellow\x1b[0m")
console.log("- \\x1b[34m", " | \x1b[34mBlue\x1b[0m")
console.log("- \\x1b[35m", " | \x1b[35mMagenta\x1b[0m")
console.log("- \\x1b[36m", " | \x1b[36mCyan\x1b[0m")
console.log("- \\x1b[37m", " | \x1b[37mWhite\x1b[0m")
console.log("- \\x1b[40m", " | \x1b[40mBlack Background\x1b[0m")
console.log("- \\x1b[41m", " | \x1b[41mRed Background\x1b[0m")
console.log("- \\x1b[42m", " | \x1b[42mGreen Background\x1b[0m")
console.log("- \\x1b[43m", " | \x1b[43mYellow Background\x1b[0m")
console.log("- \\x1b[44m", " | \x1b[44mBlue Background\x1b[0m")
console.log("- \\x1b[45m", " | \x1b[45mMagenta Background\x1b[0m")
console.log("- \\x1b[46m", " | \x1b[46mCyan Background\x1b[0m")
console.log("- \\x1b[47m", " | \x1b[47mWhite Background\x1b[0m")
console.log("- \\x1b[90m", " | \x1b[90mBright Black\x1b[0m")
console.log("- \\x1b[91m", " | \x1b[91mBright Red\x1b[0m")
console.log("- \\x1b[92m", " | \x1b[92mBright Green\x1b[0m")
console.log("- \\x1b[93m", " | \x1b[93mBright Yellow\x1b[0m")
console.log("- \\x1b[94m", " | \x1b[94mBright Blue\x1b[0m")
console.log("- \\x1b[95m", " | \x1b[95mBright Magenta\x1b[0m")
console.log("- \\x1b[96m", " | \x1b[96mBright Cyan\x1b[0m")
console.log("- \\x1b[97m", " | \x1b[97mBright White\x1b[0m")
console.log("- \\x1b[100m", "| \x1b[100mBright Black Background\x1b[0m")
console.log("- \\x1b[101m", "| \x1b[101mBright Red Background\x1b[0m")
console.log("- \\x1b[102m", "| \x1b[102mBright Green Background\x1b[0m")
console.log("- \\x1b[103m", "| \x1b[103mBright Yellow Background\x1b[0m")
console.log("- \\x1b[104m", "| \x1b[104mBright Blue Background\x1b[0m")
console.log("- \\x1b[105m", "| \x1b[105mBright Magenta Background\x1b[0m")
console.log("- \\x1b[106m", "| \x1b[106mBright Cyan Background\x1b[0m")
console.log("- \\x1b[107m", "| \x1b[107mBright White Background\x1b[0m")
console.log("\n***** 24-BIT RGB COLOR EXAMPLES *****\n")
console.log("- \\x1b[38;2;150;56;78m", "| \x1b[38;2;150;56;78mCustom RGB 'Rose' Font\x1b[0m")
console.log("- \\x1b[38;2;229;255;0m", "| \x1b[38;2;229;255;0mCustom RGB 'Yellow' Font\x1b[0m")
console.log("\n***** 256-COLOR (8-BIT) COLOR EXAMPLES *****\n")
console.log("- \\x1b[48;5;49m", "| \x1b[48;5;49mMint Background\x1b[0m")
console.log("- \\x1b[48;5;45m", "| \x1b[48;5;45mCyan Background\x1b[0m")
console.log("- \\x1b[38;5;33m", "| \x1b[38;5;33mBlue Font\x1b[0m")
console.log("- \\x1b[38;5;61m", "| \x1b[38;5;61mPurple Font\x1b[0m")
console.log("\n\n")
Sources:
https://davidlozzi.com/2021/03/16/style-up-your-console-logs/
https://simplernerd.com/js-console-colors/
https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
https://tforgione.fr/posts/ansi-escape-codes/
Top comments (1)
Nice article. I enjoyed with it.