伟明部落格

终端文本的CSS样式

--发布于 2023-06-08 11:23:56

在网页端,我们用CSS(层叠样式表,Cascading Style Sheets)来给文字润色,使其显得多姿多彩。在终端,我们也可以使用ANSI转义序列给文字及其背景上色,但它不叫CSS,而是叫SGR(选择图形再现,Select Graphic Rendition)。

3/4位色样式

在Bash终端中,输入如下命令

echo -e "\033[31;1;4mHello\033[0m"

就会显示出,一个Hello字符串,并有如下样式:红色的,加粗的,带下划线的。

其中,\033是一个8进制的数,在ASCII表中表示ESC转义字符,然后是左中括号,31表示红色的文本前景色,1表示加粗字体,4表示加下划线。字母m表示设置SGR参数,用于设置文字颜色和背景色等。然后是要显示的字符串内容,即Hello。最后一个转义序列也是同样的结构,其中的0表示,重置回默认设置。

如果给上面的Hello字符串,加上绿色,颜色代码为42,Shell命令就是

echo -e "\033[31;42;1;4mHello\033[0m"

8位色

8位就是2的8次方,一共有256种色。8位色用下面这种格式表示

# 设置文字前景色
ESC[38;5;⟨n⟩m
# 设置背景色
ESC[48;5;⟨n⟩m

# 其中,n是来自于下表中的颜色代码

# 输出草绿色(代码113)的Hello
echo -e "\033[38;5;113mHello\033[0m"

# 输出背景色为草绿色(代码113)的Hello
echo -e "\033[48;5;113mHello\033[0m"

下面的Shell脚本就显示了这256个背景色

#!/usr/bin/env bash

for (( i = 0; i < 256; i++ )); do
    echo -ne "\033[48;5;${i}m  \033[0m"  # 显示两个空格表示一个色块
    r=$((i % 16)) # 判断是否需要换行,每行16个
    if [ $r -eq 15 ]; then
      printf "\n"
    fi
done

输出结果

说明

上面这些样式字符串,不单在Shell脚本中可以用,在各种编程语言中的各类printf()函数中也可以用。

#include <stdio.h>

int main(void)
{
    int i, j, n;

    for (i = 0; i < 11; i++) {
        for (j = 0; j < 10; j++) {
            n = 10 * i + j;
            if (n > 108) break;
            printf("\033[%dm %3d\033[m", n, n);
        }
        printf("\n");
    }
    return 0;
}

参考

List of ANSI color escape sequences

--更新于 2023-06-08 11:26:40