ANSI Escape Sequences

[kangkai124]

今天在看 ant-design 源码的时候，发现了一条很有意思的代码：

console.log(`\x1b[34m ${file} is prettier`);

复制到命令行发现是打印出了带有颜色的输出，所以稍微学习了一下。

[kangkai124]

Wiki 百科把这些符号称为 ANSI escape sequences，其实就是终端的特殊控制符，用于控制光标的位置、字体颜色和其他一些操作如清屏、前景背景色设置等。

\x1b 是16进制码1b，表示 Esc，而 [ 则是 CSI - Control Sequence Introducer。[ 后面的最后一个字符决定作用。如下图，比如 \x1b[2k 表示删除光标所在的这一行。而 m 则对显示、颜色起作用。

Code	Name	Effect
CSI n A	CUU – Cursor Up	Moves the cursor n (default 1) cells in the given direction. If the cursor is already at the edge of the screen, this has no effect.
CSI n B	CUD – Cursor Down
CSI n C	CUF – Cursor Forward
CSI n D	CUB – Cursor Back
CSI n E	CNL – Cursor Next Line	Moves cursor to beginning of the line n (default 1) lines down. (not ANSI.SYS)
CSI n F	CPL – Cursor Previous Line	Moves cursor to beginning of the line n (default 1) lines up. (not ANSI.SYS)
CSI n G	CHA – Cursor Horizontal Absolute	Moves the cursor to column n (default 1). (not ANSI.SYS)
CSI n ; m H	CUP – Cursor Position	Moves the cursor to row n, column m. The values are 1-based, and default to 1 (top left corner) if omitted. A sequence such as CSI ;5H is a synonym for CSI 1;5H as well as CSI 17;H is the same as CSI 17H and CSI 17;1H
CSI n J	ED – Erase in Display	Clears part of the screen. If n is 0 (or missing), clear from cursor to end of screen. If n is 1, clear from cursor to beginning of the screen. If n is 2, clear entire screen (and moves cursor to upper left on DOS ANSI.SYS). If n is 3, clear entire screen and delete all lines saved in the scrollback buffer (this feature was added for xterm and is supported by other terminal applications).
CSI n K	EL – Erase in Line	Erases part of the line. If n is 0 (or missing), clear from cursor to the end of the line. If n is 1, clear from cursor to beginning of the line. If n is 2, clear entire line. Cursor position does not change.
CSI n S	SU – Scroll Up	Scroll whole page up by n (default 1) lines. New lines are added at the bottom. (not ANSI.SYS)
CSI n T	SD – Scroll Down	Scroll whole page down by n (default 1) lines. New lines are added at the top. (not ANSI.SYS)
CSI n ; m f	HVP – Horizontal Vertical Position	Same as CUP
CSI n m	SGR – Select Graphic Rendition	Sets the appearance of the following characters, see SGR parameters below.
CSI 5i	AUX Port On	Enable aux serial port usually for local serial printer
CSI 4i	AUX Port Off	Disable aux serial port usually for local serial printer
CSI 6n	DSR – Device Status Report	Reports the cursor position (CPR) to the application as (as though typed at the keyboard) ESC[n;mR, where n is the row and m is the column.)
CSI s	SCP – Save Cursor Position	Saves the cursor position/state.
CSI u	RCP – Restore Cursor Position	Restores the cursor position/state.

[kangkai124]

上面的表格中，CSI m 对应着 SGR – Select Graphic Rendition。SGR 属性对应不同的显示，而多个属性可以写在同一的序列中，用分号 ; 隔开。设置了 SGR 属性后，如果没有跟着重置属性，则之前的属性会一直起作用。

下面是 SGR 的属性表格：

Code	Effect	Note
0	Reset / Normal	all attributes off
1	Bold or increased intensity
2	Faint (decreased intensity)
3	Italic	Not widely supported. Sometimes treated as inverse.
4	Underline
5	Slow Blink	less than 150 per minute
6	Rapid Blink	MS-DOS ANSI.SYS; 150+ per minute; not widely supported
7	reverse video	swap foreground and background colors
8	Conceal	Not widely supported.
9	Crossed-out	Characters legible, but marked for deletion.
10	Primary(default) font
11–19	Alternative font	Select alternative font {\displaystyle n-10}
20	Fraktur	Rarely supported
21	Doubly underline or Bold off	Double-underline per ECMA-48.[22] See discussion
22	Normal color or intensity	Neither bold nor faint
23	Not italic, not Fraktur
24	Underline off	Not singly or doubly underlined
25	Blink off
27	Inverse off
28	Reveal	conceal off
29	Not crossed out
30–37	Set foreground color	See color table below
38	Set foreground color	Next arguments are 5;n or 2;r;g;b, see below
39	Default foreground color	implementation defined (according to standard)
40–47	Set background color	See color table below
48	Set background color	Next arguments are 5;n or 2;r;g;b, see below
49	Default background color	implementation defined (according to standard)
51	Framed
52	Encircled
53	Overlined
54	Not framed or encircled
55	Not overlined
60	ideogram underline or right side line	Rarely supported
61	ideogram double underline ordouble line on the right side
62	ideogram overline or left side line
63	ideogram double overline ordouble line on the left side
64	ideogram stress marking
65	ideogram attributes off	reset the effects of all of 60–64
90–97	Set bright foreground color	aixterm (not in standard)
100–107	Set bright background color	aixterm (not in standard)

[kangkai124]

颜色属性：

在这里更加直观的查看颜色

Name	FG Code	BG Code
Black	30	40
Red	31	41
Green	32	42
Yellow	33	43
Blue	34	44
Magenta	35	45
Cyan	36	46
White	37	47
Bright Black	90	100
Bright Red	91	101
Bright Green	92	102
Bright Yellow	93	103
Bright Blue	94	104
Bright Magenta	95	105
Bright Cyan	96	106
Bright White	97	107

[kangkai124]

好吧，上面说了那么多专业的词语，其实我也是看的似懂非懂，下面直接上例子就好理解了。

[kangkai124]

Reset = "\x1b[0m"       // 恢复默认
Bright = "\x1b[1m"      // 高亮/加粗
Dim = "\x1b[2m"         // 变灰
Underscore = "\x1b[4m"  // 下划线
Blink = "\x1b[5m"       // 闪烁
Reverse = "\x1b[7m"     // 反显
Hidden = "\x1b[8m"      // 消隐

FgBlack = "\x1b[30m"    // 前景黑色
FgRed = "\x1b[31m"      // 前景红色
FgGreen = "\x1b[32m"    // 前景绿色
FgYellow = "\x1b[33m"   // 前景黄色
FgBlue = "\x1b[34m"     // 前景蓝色
FgMagenta = "\x1b[35m"  // 前景洋红色
FgCyan = "\x1b[36m"     // 前景蓝绿色
FgWhite = "\x1b[37m"    // 前景白色

BgBlack = "\x1b[40m"    // 后景色
BgRed = "\x1b[41m"      
BgGreen = "\x1b[42m"    
BgYellow = "\x1b[43m"   
BgBlue = "\x1b[44m"     
BgMagenta = "\x1b[45m"  
BgCyan = "\x1b[46m"     
BgWhite = "\x1b[47m"    

[kangkai124]

栗子

console.log('hello Github')

console.log('\x1b[1mhello Github')  // 高亮

console.log('\x1b[4mhello Github')  // 下划线

console.log('\x1b[34mhello Github\x1b[0m')  // 设置前景色

console.log('\x1b[42mhello Github\x1b[0m')  // 设置后景色

console.log('\x1b[34m\x1b[45mhello Github\x1b[0m')  // 多个属性一起使用
console.log('\x1b[34;45mhello Github\x1b[0m')
console.log('\x1b[1;4;37;45mhello Github\x1b[0m')

[kangkai124]

上面栗子代码均在 node 环境中执行