Add color to the terminal output

Usually when using the third-party NPM library development, I often see the terminal printing different colors of the prompt message, feel beautiful, at the same time, have you thought about the principle?

experience

First, you can try the following commands in your bash shell

Echo -e "\033[31m front End \033[0m"Copy the code

Or use Node to execute js files

// test.js
console.log('\033[31m Front end pour tea soldier \033[0m')
Copy the code

The result of both commands is the same, both output red font on the terminal, although a little pink 😂



Why use\033[31mWhat about this weird character wrapping text around a special color? That’s when you needANSI escape sequenceCome on stage.

ANSI escape sequence

This is a standard developed by the American National Standards Institute in the 1970s, and has been widely used in computer equipment since the 1980s. At present, DOS and UNIx-type terminal emulators almost all support ASNI escape sequences.

According to Wikipedia, this is an escape sequence standard with in-signal for controlling cursor position, color, and other options on video text terminals. Inserts certain sequences of bytes into the text, mostly beginning with the ESC escape character and the “[” character, which the terminal interprets as corresponding instructions rather than ordinary character encodings.

The common control type is ASCII

The following table lists the 0-31 non-printable ASCII codes used for control

In the example given at the beginning of this article, 033 is the octal representation of the escape character ESC, which corresponds to 0x1b or 0x1b in hexadecimal notation. The escape character in C is \e, and the escape character in ASCII is 27.

The previous example can also be written in hexadecimal or \e. The following three commands have the same effect.

Echo - E "\x1b[31m front end pour tea soldier \x1b[0m" echo -e "\x1b[31m front end pour tea soldier \x1b[0m" echo -e "\e[0m front end pour tea soldier \x1b[0m" echo -e "\e[0m"Copy the code

Note: It is best not to use \e as an escape character, as not all languages and compilers support it, such as Python. Hexadecimal notation can sometimes be problematic, such as the reset state described below. The hexadecimal representation of the escape sequence of the reset state is \x1bc, which is a valid hexadecimal number, so the terminal parses it as a whole and does not reset \033c.

The following text will use ESC for \033 or \x1b.

ESC is combined with the @a-z [\]^_ range of characters (the C1 control character), which we call an escape sequence.

Part of ANSI escape sequence

The escape sequence for the reset state is represented as \033c in octal and \x1bc in hexadecimal, but \x1bc is a legal hexadecimal number, so it doesn’t look like

CSI sequence

The combination of ESC and [is called CSI, and sequences that begin with CSI are called CSI sequences, also known as ANSI control sequences.

ESC[CSI]

CSI + 0 or N parameter bytes + 0 or N intermediate bytes + 1 final byte form the CSI sequence. The character range for the second half of the CSI sequence

The CSI sequence ignores characters beyond 0x20 — 0x7E.

Different combinations of the latter half of the CSI sequence represent different functions, and here are some examples.

Cursor control

erasure

Screen mode

Keyboard string

The mode of ESC[{code};{string};{…}p redefines a key to a specified string. See Resources for details.

As you can see from the above, when the final character is A-H, the cursor moves. When the final character is J or K, it indicates erasure. Screen mode is indicated when the final character is h and the parameter byte is =.

When the final character is m, there are no arguments or arguments; The separated CSI sequence is the SGR that we are going to focus on.

SGR

Select Graphic Rendition. You can set terminal text styles, including color, thickness, italic, and underscore.

Common Style Settings

The following table lists CSI sequences in common styles other than colors

8/16 color

30-37 is the standard 8 standard foreground colors, 40-47 is the corresponding background color, 39 or 49 can be reset color. The unmentioned 38 and 48 are used to set 256 colors and RGB colors, as described later.

For terminals that support the AIXTerm specification, there are eight additional high-intensity colors.

If you want bold text with a red foreground and a white background, write this

\033[1;31;47m
Copy the code

The same color code may display different colors on different terminals.

256 colors

5 indicates 256 colors. ID is a value from 0 to 255, which can be understood as the serial number of colors.

256 color calculation method

RGB color

2 indicates that RGB color is used. Only terminals that support true color (24-bit RGB) can use this color. R, G, and B range from 0 to 255.

\033[0m

Recall from the example at the beginning of this article that we used \033[0m, just to reset all styles. It is more concise to write \033[m, because no arguments default to 0.

Of course, if only the color is set or you want to reset the color, you can use \033[39m or \033[49m to reset the color.

Is it ok not to reset the style? B: Sure. However, if the style is not reset and the new style is not set, subsequent output will inherit the previous style. For example, Node runs the following code

// test.js
console.log('\033[31m Front End Pour tea soldier ');
console.log('Front Tea Sommelier');
Copy the code

The second sentence will also have color, which may not be what we want.

chalk

Chalk is a well-known nodeJS library that displays colors on terminals. How does it do this?

Debugging revealed that it encapsulates a library called anSI-styles, which also follows the escape sequence specification, depending on the code. However, it uses Unicode \u001B to represent ESC.

conclusion

1. Escape characterESCThere are several ways to express it:\ 033.\x1b.\x1B.\eand\u001B;
2. ESCCombined with certain characters to form an Escape Sequence,ESCand[compositionCSI(Control sequence importer);
3. CSI sequences can control terminal behavior when the final character ism, used for intermediate parameters;In SGR mode, you can set the color, thickness and other styles of terminal text\033[{parameter 1};{parameter 2};{... parameter n}mThis format;
4. Different terminals have different levels of support for CSI sequences. The styles mentioned above may not work, and the color display may also be different.

Finally, the last rendering



Isn’t that cool?

The resources

1. What does the printf (” \ “033 c) scheme: stackoverflow.com/questions/4…
2. The ANSI Escape Sequences: gist.github.com/fnky/458719…
3. The ANSI escape sequences: zh.wikipedia.org/wiki/ANSI%E…
4. Aixterm specification: sites. The ualberta. Ca/dept/chemen…
5. C1 Control characters: zh.wikipedia.org/wiki/C0%E4%…
6. Asni – styles: github.com/chalk/ansi-…