How to add color to your Terminal output

You can use ANSI Escape Codes to color or highlight text printed to the command line without installing extra packages.

Just like a mark-up language, we can use a colored escape code followed by the text and ending with a reset escape code to tell the terminal to change the color (foreground or background). Kind of like this:

<COLORCODE>Your text here</COLORRESETCODE>

Instead of nice looking tags, the escape codes are a little more abstract, so you can just copy the color code you want and add the reset code to the end. Here's a list of the color codes available:

COLORS:
\x1b[30m     BLACK 
\x1b[31m     RED 
\x1b[32m     GREEN 
\x1b[33m     YELLOW 
\x1b[34m     BLUE 
\x1b[35m     MAGENTA 
\x1b[36m     CYAN 
\x1b[37m     WHITE

BACKGROUND COLORS:
\x1b[40m     BLACK 
\x1b[41m     RED 
\x1b[42m     GREEN 
\x1b[43m     YELLOW 
\x1b[44m     BLUE 
\x1b[45m     MAGENTA 
\x1b[46m     CYAN 
\x1b[47m     WHITE
 
RESET CODE:
\x1b[0m

For example, if you want to print out the word, YELLOW, in the yellow color, sandwich the word with the yellow escape code and the reset code, like this:

\x1b[33mYELLOW\x1b[0m

If you want a quick demo of this in action, check out this 55 second video:

Also, as of VS Code 1.69.0, we can also mark our output in the integrated terminal both at the start of the line and on the scroll bar, using this code:

\x1b]1337;SetMark\x07

Note that this particular mark should be used in its entirety—the "SetMark" you see in the middle is not a placeholder, but a required part of the code to function correctly. You can put text on the same line before or after this code and it will mark the terminal regardless.

This is a demo of this mark function:

We can make all of this a lot easier by turning these codes into snippets, so we can insert them whenever we like without looking them up. Watch this 45 second demo:

Here is a Gist page with my VS Code snippets for ANSI escape codes:

Trade-offs / Negatives of This Technique

While it's incredibly useful to add color to your CLI program / script, this isn't a perfect solution for every possible terminal or shell. I recommend using these for your personal scripts, or for internal teams at work where you can test each terminal and determine from there if it's worth using. I would not recommend using these in a "production" environment, because if a terminal doesn't support these codes, it will make the output very messy.

I have found that these codes work in the latest version of the Chrome dev tools console (using Javascript, console.log). However, it does not work in Firefox or Safari as of July 19, 2022.

These codes work in the default Mac Terminal program (zshell, specifically). They also work in the default integrated terminal of VS Code (which, again, for me is zshell). They are not working for me in the VS Code bash shell.

If you want to test these in your shell, you can echo out these codes by pasting the following command:

echo "COLORS:\n 30\t\x1b[30mBLACK\x1b[0m \n 31\t\x1b[31mRED\x1b[0m \n 32\t\x1b[32mGREEN\x1b[0m \n 33\t\x1b[33mYELLOW\x1b[0m \n 34\t\x1b[34mBLUE\x1b[0m \n 35\t\x1b[35mMAGENTA\x1b[0m \n 36\t\x1b[36mCYAN\x1b[0m \n 37\t\x1b[37mWHITE\x1b[0m" && echo "BACKGROUND COLORS:\n 40\t\x1b[40mBLACK\x1b[0m \n 41\t\x1b[41mRED\x1b[0m \n 42\t\x1b[42mGREEN\x1b[0m \n 43\t\x1b[43mYELLOW\x1b[0m \n 44\t\x1b[44mBLUE\x1b[0m \n 45\t\x1b[45mMAGENTA\x1b[0m \n 46\t\x1b[46mCYAN\x1b[0m \n 47\t\x1b[47mWHITE\x1b[0m"