ANSI/terminal colors终端颜色控制效果大全

基础能实现的效果如下,跨平台,不同的支持可能有细微差异

附JS实现代码:

color.js

export const reset = "\x1b[0m"; // 重置所有样式

export const bold = "\x1b[1m"; // 加粗
export const dim = "\x1b[2m"; // 暗淡
export const underline = "\x1b[4m"; // 下划线
export const blink = "\x1b[5m"; // 闪烁
export const reverse = "\x1b[7m"; // 反显
export const hidden = "\x1b[8m"; // 隐藏

// 前景色(字体颜色)
export const black = "\x1b[30m"; // 黑色(灰色)
export const red = "\x1b[31m"; // 红色
export const green = "\x1b[32m"; // 绿色
export const yellow = "\x1b[33m"; // 黄色
export const blue = "\x1b[34m"; // 蓝色
export const magenta = "\x1b[35m"; // 洋红色(暗红)
export const cyan = "\x1b[36m"; // 青色(暗绿)
export const white = "\x1b[37m"; // 白色

// 明亮的前景色(字体颜色)
export const brightBlack = "\x1b[90m"; // 浅灰色
export const brightRed = "\x1b[91m"; // 明亮的红色
export const brightGreen = "\x1b[92m"; // 明亮的绿色
export const brightYellow = "\x1b[93m"; // 明亮的黄色
export const brightBlue = "\x1b[94m"; // 明亮的蓝色
export const brightMagenta = "\x1b[95m"; // 明亮的洋红色
export const brightCyan = "\x1b[96m"; // 明亮的青色
export const brightWhite = "\x1b[97m"; // 明亮的白色

// 背景色
export const bgBlack = "\x1b[40m"; // 黑色背景
export const bgRed = "\x1b[41m"; // 红色背景
export const bgGreen = "\x1b[42m"; // 绿色背景
export const bgYellow = "\x1b[43m"; // 黄色背景
export const bgBlue = "\x1b[44m"; // 蓝色背景
export const bgMagenta = "\x1b[45m"; // 洋红色背景
export const bgCyan = "\x1b[46m"; // 青色背景
export const bgWhite = "\x1b[47m"; // 白色背景

// 明亮的背景色
export const bgBrightBlack = "\x1b[100m"; // 明亮的黑色背景
export const bgBrightRed = "\x1b[101m"; // 明亮的红色背景
export const bgBrightGreen = "\x1b[102m"; // 明亮的绿色背景
export const bgBrightYellow = "\x1b[103m"; // 明亮的黄色背景
export const bgBrightBlue = "\x1b[104m"; // 明亮的蓝色背景
export const bgBrightMagenta = "\x1b[105m"; // 明亮的洋红色背景
export const bgBrightCyan = "\x1b[106m"; // 明亮的青色背景
export const bgBrightWhite = "\x1b[107m"; // 明亮的白色背景

test.js

import * as c from './color.js';
console.log(c.bold,'测试文本:test-text',c.reset);
console.log(c.dim,'测试文本:test-text',c.reset);
console.log(c.underline,'测试文本:test-text',c.reset);
console.log(c.blink,'测试文本:test-text',c.reset);
console.log(c.reverse,'测试文本:test-text',c.reset);
console.log(c.hidden,'测试文本:test-text',c.reset);
console.log('==================');
console.log(c.black,'测试文本:test-text',c.reset);
console.log(c.red,'测试文本:test-text',c.reset);
console.log(c.green,'测试文本:test-text',c.reset);
console.log(c.yellow,'测试文本:test-text',c.reset);
console.log(c.blue,'测试文本:test-text',c.reset);
console.log(c.magenta,'测试文本:test-text',c.reset);
console.log(c.cyan,'测试文本:test-text',c.reset);
console.log(c.white,'测试文本:test-text',c.reset);
console.log('==================');
console.log(c.brightBlack,'测试文本:test-text',c.reset);
console.log(c.brightRed,'测试文本:test-text',c.reset);
console.log(c.brightGreen,'测试文本:test-text',c.reset);
console.log(c.brightYellow,'测试文本:test-text',c.reset);
console.log(c.brightBlue,'测试文本:test-text',c.reset);
console.log(c.brightMagenta,'测试文本:test-text',c.reset);
console.log(c.brightCyan,'测试文本:test-text',c.reset);
console.log(c.brightWhite,'测试文本:test-text',c.reset);
console.log('==================');
console.log(c.bgBlack,'测试文本:test-text',c.reset);
console.log(c.bgRed,'测试文本:test-text',c.reset);
console.log(c.bgGreen,'测试文本:test-text',c.reset);
console.log(c.bgYellow,'测试文本:test-text',c.reset);
console.log(c.bgBlue,'测试文本:test-text',c.reset);
console.log(c.bgMagenta,'测试文本:test-text',c.reset);
console.log(c.bgCyan,'测试文本:test-text',c.reset);
console.log(c.bgWhite,'测试文本:test-text',c.reset);
console.log('==================');
console.log(c.bgBrightBlack,'测试文本:test-text',c.reset);
console.log(c.bgBrightRed,'测试文本:test-text',c.reset);
console.log(c.bgBrightGreen,'测试文本:test-text',c.reset);
console.log(c.bgBrightYellow,'测试文本:test-text',c.reset);
console.log(c.bgBrightBlue,'测试文本:test-text',c.reset);
console.log(c.bgBrightMagenta,'测试文本:test-text',c.reset);
console.log(c.bgBrightCyan,'测试文本:test-text',c.reset);
console.log(c.bgBrightWhite,'测试文本:test-text',c.reset);
2 Likes

感谢你的分享

1 Like

感谢大佬的分享

1 Like

此话题已在最后回复的 30 天后被自动关闭。不再允许新回复。