🎨
Notes
  • 持续更新中...
  • articles
    • browser
      • 深入理解现代浏览器 - 导航
      • 深入理解现代浏览器 - 架构
      • 深入理解现代浏览器 - 交互
      • 深入理解现代浏览器 - 渲染器进程
    • dsa
      • DSA - 并查集
      • DSA - 哈希表
      • DSA - AVL 树
      • DSA - 二叉树
      • 快速选择
      • Big O 算法复杂度
      • DSA - 栈和队列
      • DSA - 前缀树 Trie
      • DSA - 图
      • DSA - 链表
      • DSA - 递归
    • typescript
      • TypeScript 学习笔记 - 任意属性 (Indexable Types)
      • 力扣的 TypeScript 面试题
      • TypeScript 学习笔记 - as const
      • TypeScript 学习笔记 - infer
    • network
      • Internet Protocol (IP)
      • 计算机网络基础
      • 如何分辨同源和同站
      • DNS 如何查询 IP 地址?
    • vue
      • Nuxt.js 入门
      • 从零实现一个 Mini Vue
      • 从零实现一个简单的 VDOM 引擎
      • 从零实现一个响应式状态管理
    • sorting
      • 排序 - 归并排序
      • 排序 - 冒泡排序
      • 排序 - 选择排序
      • 排序 - 计数排序
      • 排序 - 插入排序
    • compile
      • Compiler and Interpreter
      • Just-In-Time (JIT) Compilers
      • 编译流程
    • others
      • 什么是上下文无关语法
      • 如何在终端打印出有颜色的字
    • dev-ops
      • github-actions
        • GitHub Action 简介
        • GitHub Actions for CI
    • workflow
      • 用 Node 写一个 cli
      • 如何规范 git commit 信息
      • 如何监听 git hooks
      • 如何规范代码风格 - prettier
      • 如何发布一个 npm package
      • 如何规范代码质量 - eslint
    • design-pattern
      • 代理模式
      • 单例模式
      • 策略模式
    • security
      • 点击劫持
      • CSP 内容安全策略
    • javascript
      • 尾调用优化
      • 4种常见的内存泄漏及解决方法
    • unit-test
      • Test Vuejs Application - Chapter 2
      • Test Vuejs Application - Chapter 1
      • Vue Unit Test Intro
    • performance
      • HTTP 缓存
      • 如何优化图片资源
Powered by GitBook
On this page
  • 8-bit color
  • 24-bit color
  • Some color references
  • A simple chalk tool
  • more info

Was this helpful?

  1. articles
  2. others

如何在终端打印出有颜色的字

8-bit color

syntax:

ESC[ 38;5;⟨n⟩ m Select foreground color
ESC[ 48;5;⟨n⟩ m Select background color
  • ESC 指non-printable control character escape,具体的值是 \x1b。

e.g.(Nodejs)

const bg = 255;
const text = 'hello world';

// setting background
console.log(`\x1b[48;5;${i}m${text}`);

// reset setting
console.log(`\x1b[0m`);

// setting background and foreground
console.log(`\x1b[48;5;255m\x1b[38;5;222m${text}`);

打印所有 8-bit 颜色:

const print256Color = () => {
    for (let i = 0; i < 256; i++) {
        const text = String(i).padEnd(4);
        const background = `\x1b[48;5;${i}m`;
        let foreground = '\x1b[30m'; // black

        if (
            (i >= 0 && i <= 6) ||
            (i >= 16 && i <= 213) ||
            (i >= 232 && i <= 243)
        )
            foreground = '\x1b[37m'; // white

        const clear = `\x1b[0m`;
        process.stdout.write(`${background}${foreground}${text}${clear}`);
    }
};

24-bit color

ESC[ 38;2;⟨r⟩;⟨g⟩;⟨b⟩ m Select RGB foreground color
ESC[ 48;2;⟨r⟩;⟨g⟩;⟨b⟩ m Select RGB background color

e.g.

const text = 'suukii';

// foreground
const fgRed = '255';
const fgGreen = '255';
const fgBlack = '0';

console.log(`\x1b[38;2;${fgRed};${fgGreen};${fgBlack}m${text}`);

// reset
console.log(`\x1b[0m`);

// background
const bgRed = '255';
const bgGreen = '255';
const bgBlack = '0';

console.log(`\x1b[48;2;${bgRed};${bgGreen};${bgBlack}m${text}`);

Some color references

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"

A simple chalk tool

const chalk = (function () {
    const colorMappings = {
        30: 'black',
        31: 'red',
        32: 'green',
        33: 'yellow',
        34: 'blue',
        35: 'magenta',
        36: 'cyan',
        37: 'white',
    };

    const chalk = Object.entries(colorMappings).reduce((chalk, [key, name]) => {
        chalk[name] = text => console.log(`\x1b[${key}m${text}\x1b[1m`);
        return chalk;
    }, {});

    return chalk;
})();

chalk.green(`√√√√√√`);
chalk.red(`        ××××××`);
chalk.blue(`(●'◡'●)`);
chalk.cyan(`          (●ˇ∀ˇ●)`);
chalk.white(`(ง •_•)ง`);
chalk.magenta(`        ε=ε=ε=(~ ̄▽ ̄)~`);
chalk.yellow(`\n*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。`);

more info

Previous什么是上下文无关语法Nextdev-ops

Last updated 4 years ago

Was this helpful?

ANSI escape code