控制台与终端输出带样式文本原理及实现

2022-02-27

在浏览器控制台输出带样式的文本

作为一个前端，在浏览器控制台输出带样式的文本已经是手到擒来了，一个%c的占位符就可以自定义后续文本的样式。比如：

const style = `
font-weight: bold;
font-size: 50px;color: red;
text-shadow: 3px 3px 0 rgb(217,31,38),
    6px 6px 0 rgb(226,91,14),
    9px 9px 0 rgb(245,221,8),
    12px 12px 0 rgb(5,148,68),
    15px 15px 0 rgb(2,135,206),
    18px 18px 0 rgb(4,77,145),
    21px 21px 0 rgb(42,21,113)`
console.log('%c%s', style, '手到擒来')

那如何在命令行终端输出带样式的文本呢

试着在windows的cmd窗口中输入如下命令：

1	echo ^[[31m

这里的**^[ 是通过ctrl+[ **组合键按出来的。这时候你会发现命令行后续的内容全都变成红色了。再次输入命令：

1	echo ^[[0m

这时候又会恢复成原色。

原因是转义字符会被终端拦截，用来处理颜色和样式。ASCII的颜色转义码的标准写法是转义符 + [ + 数字 + m。这里的数字可以是英文分号分隔的整数，如4;42就表示绿色背景+下划线的转义。0代表重置，会把前面所有的样式清空。

如何在node环境中通过console.log输出带样式的文本

上面终端的转义字符只要使用escape的转义字符就行。可以试试创建一个js文件test.js，代码如下

1	console.log('测试\x1b[3;9;32m%s\x1b[31m文本\x1b[0m样式', '终端')

输出结果：

①代码中%s是占位符，代表后面的字符串

③ \x1b是转义字符，\x表示十六进制，1b在ASCII码表中代表ESC键。如果你愿意，可以把\x1b替换为八进制\033，甚至是unicode字符\u001b。

④ 颜色转义码里的数字可以是英文分号分隔的整数，如\x1b[3;9;32m就表示斜体+中划线+绿色前景色的转义。\x1b[0m是重置转义符，会把前面所有的样式清空。

第三方库

谁都不想输出个样式这么繁琐，自然就有人帮忙封装起来了。目前终端样式美化的库中star数最多的应该就是chalk了，看下chalk中转义数字的映射文件：

const styles = {
  modifier: {
    reset: [0, 0],
    // 21 isn't widely supported and 22 does the same thing
    bold: [1, 22],
    dim: [2, 22],
    italic: [3, 23],
    underline: [4, 24],
    overline: [53, 55],
    inverse: [7, 27],
    hidden: [8, 28],
    strikethrough: [9, 29],
  },
  color: {
    black: [30, 39],
    red: [31, 39],
    green: [32, 39],
    yellow: [33, 39],
    blue: [34, 39],
    magenta: [35, 39],
    cyan: [36, 39],
    white: [37, 39],

    // Bright color
    blackBright: [90, 39],
    redBright: [91, 39],
    greenBright: [92, 39],
    yellowBright: [93, 39],
    blueBright: [94, 39],
    magentaBright: [95, 39],
    cyanBright: [96, 39],
    whiteBright: [97, 39],
  },
  bgColor: {
    bgBlack: [40, 49],
    bgRed: [41, 49],
    bgGreen: [42, 49],
    bgYellow: [43, 49],
    bgBlue: [44, 49],
    bgMagenta: [45, 49],
    bgCyan: [46, 49],
    bgWhite: [47, 49],

    // Bright color
    bgBlackBright: [100, 49],
    bgRedBright: [101, 49],
    bgGreenBright: [102, 49],
    bgYellowBright: [103, 49],
    bgBlueBright: [104, 49],
    bgMagentaBright: [105, 49],
    bgCyanBright: [106, 49],
    bgWhiteBright: [107, 49],
  },
};

每个颜色都是一个只有俩元素的数组，第一个元素是当前样式的转义数字，第二个元素是清除该样式的转义数字

参考资料：ANSI Escape Codes