我们都知道,在nodejs环境下使用普通的console.log,console.error,console.info输出都是不会有颜色的,如果你不知道,那你现在知道啦😏。在这种情况下,如果我们需要彩色输出,则通常通过chalk这个node模块来实现,

chalk使用方法

基本用法

1
2
const chalk = require('chalk')
console.log(chalk.red.bold.bgWhite('Leo\'s Blog'))

上面代码执行的结果如下,Leo's Blog 加粗,字体颜色是红色,背景颜色是白色。

注意:背景颜色要在 bg 后面加上具体的颜色,颜色的第一个字母大写。

在 HTML 中支持 RGB 颜色,在这里同样支持,而且是支持所有 HTML 中支持的颜色,如十六进制颜色。这里仅仅说明十六进制颜色。

下面的代码会和上面的代码实现相同的效果。

1
2
const chalk = require('chalk')
console.log(chalk.rgb(255,0,0).bold.bgRgb(255,255,255)('Leo\'s Blog'))

使用模板

该模块有一个很方便的用法就是支持模板输出,也就是说,不管在字符串中的哪个位置想改变输出的颜色,都是可以的。

1
2
const chalk = require('chalk')
console.log(chalk`{red.bold.bgWhite Leo\'s Blog}`)

当然,也可以使用 RGB 颜色值。

1
2
const chalk = require('chalk')
console.log(chalk`{rgb(255,0,0).bold.bgRgb(255,255,255) Leo\'s Blog}`)
四种方式的输出
四种方式的输出

常见形式

我们经常看到的警告、错误提示就是这么来的

1
2
3
4
5
6
7
const chalk = require('chalk')

const error = chalk.bold.red;
const warning = chalk.keyword('orange')

console.log(error('Error!'))
console.log(warning('Warning!'))
错误和警告提示
错误和警告提示

常用API

样式

  • reset - 样式重置
  • bold - 加粗
  • dim - 浅高亮
  • italic - 斜体
  • underline - 下划线
  • inverse- 反转前景和背景色
  • hidden - 隐藏内容
  • strikethrough - 删除线
  • visible- 显示chalk level > 0 的内容

前景色关键字(非全支持)

  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white
  • blackBright (alias: gray, grey)
  • redBright
  • greenBright
  • yellowBright
  • blueBright
  • magentaBright
  • cyanBright
  • whiteBright

背景色关键字(非全支持)

  • bgBlack
  • bgRed
  • bgGreen
  • bgYellow
  • bgBlue
  • bgMagenta
  • bgCyan
  • bgWhite
  • bgBlackBright (alias: bgGray, bgGrey)
  • bgRedBright
  • bgGreenBright
  • bgYellowBright
  • bgBlueBright
  • bgMagentaBright
  • bgCyanBright
  • bgWhiteBright

更多API可以看看官方文档

chalk让控制台输出样式多变的原理

其原理最重要的一个知识点就是ANSI Escape code.

ASCII编码中有些字符是不能用来在终端中打印显示的,比如'\a' 0x7代表响铃,'\n' 0x0A代表换行,这些字符被称为控制符。

而其中的一个控制符 '\e' 0x1B比较特殊,这个字符代表 ESC ,即键盘上 ESC 按键的作用。ESC 是单词 escape 的缩写,即逃逸的意思。文本中出现这个控制符,表示接下来的字符是ANSI Escape code编码。

ANSI Escape code编码中有专门控制字符颜色的控制符,例如:\e[31;44;4;1m

其意义如下:

  • \e 代表开始ANSI Escape code
  • [ 代表转义序列开始符 CSI,Control Sequence Introducer
  • 31;44;4;1 代表以; 分隔的文本样式控制符,其中 31 代表文本前景色为红色,44代表背景为蓝色,4代表下划线,1代表加粗
  • m 代表结束控制符序列

我们可以在终端中输入如下命令:

1
echo -e "\e[37;44;4;1mLEO\e[0m"

会有如下输出,带下划线的LEO字样:

echo-leo
echo-leo

因为 \e 控制符的16进制码为 0x1B , 8 进制码为 033 ,也可以用以下写法达到同样效果:

1
2
3
4
echo -e "\e[37;44;4;1mLEO\e[0m"
echo -e "\x1b[37;44;4;1mLEO\x1b[0m"
echo -e "\x1B[37;44;4;1mLEO\x1B[0m"
echo -e "\033[37;44;4;1mLEO\033[0m"
echo
echo

通过维基百科,我查到有以下参数控制符:

代码作用备注
0重置/正常关闭所有属性。
1粗体或增加强度
2弱化(降低强度)未广泛支持。
3斜体未广泛支持。有时视为反相显示。
4下划线
5缓慢闪烁低于每分钟150次。
6快速闪烁MS-DOS ANSI.SYS;每分钟150以上;未广泛支持。
7反显前景色与背景色交换。
8隐藏未广泛支持。
9划除字符清晰,但标记为删除。未广泛支持。
10主要(默认)字体
11–19替代字体选择替代字体{\displaystyle n-10}{\displaystyle n-10}。
20尖角体几乎无支持。
21关闭粗体或双下划线关闭粗体未广泛支持;双下划线几乎无支持。
22正常颜色或强度不强不弱。
23非斜体、非尖角体
24关闭下划线去掉单双下划线。
25关闭闪烁
27关闭反显
28关闭隐藏
29关闭划除
30–37设置前景色参见下面的颜色表。
38设置前景色下一个参数是5;n或2;r;g;b,见下。
39默认前景色由具体实现定义(按照标准)。
40–47设置背景色参见下面的颜色表。
48设置背景色下一个参数是5;n或2;r;g;b,见下。
49默认背景色由具体实现定义(按照标准)。
51Framed
52Encircled
53上划线
54Not framed or encircled
55关闭上划线
60表意文字下划线或右边线几乎无支持。
61表意文字双下划线或双右边线
62表意文字上划线或左边线
63表意文字双上划线或双左边线
64表意文字着重标志
65表意文字属性关闭重置60–64的所有效果。
90–97设置明亮的前景色aixterm(非标准)。
100–107设置明亮的背景色aixterm(非标准)。

颜色编码表如下:

名称前景色代码背景色代码
3040
3141
绿3242
3343
3444
品红3545
3646
3747
亮黑(灰)90100
亮红91101
亮绿92102
亮黄93103
亮蓝94104
亮品红95105
亮青96106
亮白97107

示例:

1
2
\e[31m 红色
\e[36;5;1;4m 缓慢闪烁的青色加粗带下划线字体