chalk库的使用

这篇文章主要是对chalk库官方文档的中文翻译以及我自己的一些理解。chalk的官方文档可以看这里。

首先说下chalk库的作用:美化终端输出的文本,例如添加不同的字体颜色、不同颜色的背景、粗体以及添加下划线等等,看下图:
在这里插入图片描述

优点

  • 富有表现力的API
  • 高性能
  • 允许嵌套样式
  • 支持256种颜色
  • 支持自动检测颜色
  • 不拓展String的prototype
  • 干净利落
  • 积极维护

安装

npm install chalk

使用

const chalk = require('chalk');
 
console.log(chalk.blue('Hello world!'));

Chalk提供了一个易于使用的可组合API,您只需链接和嵌套所需的样式。

const chalk = require('chalk');
const log = console.log;
 
// 组合带样式的字符串和普通的字符串
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
 
// 通过链式的API组合使用多种样式
log(chalk.blue.bgRed.bold('Hello world!'));
 
// 可以传入多个参数,就像console.log函数一样
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
 
// 嵌套样式,'world!'字符串也继承了外层的red样式
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
 
// 相同样式的嵌套,具体采用哪个样式依据就近原则。
// 例如下面的chalk.green和chalk.blue,因为'with a blue substring'离chalk.blue近,所以是蓝色字体
log(chalk.green(
    'I am a green line ' +
    chalk.blue.underline.bold('with a blue substring') +
    ' that becomes green again!'
));
 
// 可以使用ES2015的模板字符串
log(`
CPU: ${chalk.red('90%')}
RAM: ${chalk.green('40%')}
DISK: ${chalk.yellow('70%')}
`);
 
// 还可以使用ES2015的标签模板字面量语法
// 标签模板字面量语法可以看这篇博客:https://blog.csdn.net/qq_21522331/article/details/103529222
log(chalk`
CPU: {red ${cpu.totalPercent}%}
RAM: {green ${ram.used / ram.total * 100}%}
DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
`);
 
// 可以使用keyword()、rgb()和hex()三种方法设置字体颜色
log(chalk.keyword('orange')('Yay for orange colored text!'));
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));

我们有可能在多个地方使用相同的样式,多次重复的写上面的代码很麻烦,而且我们定义的样式它的具体用处没有明确的表示。
解决方法是:自定义主题。

const chalk = require('chalk');
 
const error = chalk.bold.red;
const warning = chalk.keyword('orange');
 
console.log(error('Error!'));
console.log(warning('Warning!'));

结合console.log( )的字符串替换一起使用。

const name = 'Sindre';
console.log(chalk.green('Hello %s'), name);
//=> 'Hello Sindre'

API

chalk.styles…(strings…)

例如: chalk.red.bold.underline(‘Hello’, ‘world’);
就和我们上面写的代码一样,没什么好说的。

chalk.level

设置颜色支持的级别,具体的级别有以下4种:

级别描述
0不支持所有的颜色
1只支持最基本的16种颜色
2支持256种颜色
3支持所有的颜色
(1) 你可以直接设置chalk的level属性:
chalk.level = 2;

(2) 还可以在创建新的chalk实例的时候指定:

const ctx = new chalk.Instance({level: 0});

chalk.supportsColor

检查终端支持颜色的情况,用法如下:

console.log(chalk.supportsColor)
//{ level: 3, hasBasic: true, has256: true, has16m: true }

chalk.stderr and chalk.stderr.supportsColor

chalk.stderr contains a separate instance configured with color support detected for stderr stream instead of stdout.
Override rules from chalk.supportsColor apply to this too. chalk.stderr.supportsColor is exposed for convenience.

样式

修饰符

  • 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

标签模板字面量

Chalk可以结合标签模板字面量一起使用,例如:

const chalk = require('chalk');
 
const miles = 18;
const calculateFeet = miles => miles * 5280;
 
console.log(chalk`
    There are {bold 5280 feet} in a mile.
    In {bold ${miles} miles}, there are {green.bold ${calculateFeet(miles)} feet}.
`);

以下三种用法的效果是等价的:

console.log(chalk.bold.rgb(10, 100, 200)('Hello!'));
console.log(chalk.bold.rgb(10, 100, 200)`Hello!`);
console.log(chalk`{bold.rgb(10,100,200) Hello!}`);

颜色的设置

最基本的设置字体颜色的三种方式

  • chalk.hex(‘#DEADED’).underline(‘Hello, world!’)
  • chalk.keyword(‘orange’)(‘Some orange text’)
  • chalk.rgb(15, 100, 204).inverse(‘Hello!’)

最基本的设置背景颜色的三种方式

  • chalk.bgHex(‘#DEADED’).underline(‘Hello, world!’)
  • chalk.bgKeyword(‘orange’)(‘Some orange text’)
  • chalk.bgRgb(15, 100, 204).inverse(‘Hello!’)

更多设置颜色的方式

  • rgb - 例如: chalk.rgb(255, 136, 0).bold(‘Orange!’)
  • hex - 例如: chalk.hex(‘#FF8800’).bold(‘Orange!’)
  • keyword (CSS keywords) - 例如: chalk.keyword(‘orange’).bold(‘Orange!’)
  • hsl - 例如: chalk.hsl(32, 100, 50).bold(‘Orange!’)
  • hsv - 例如: chalk.hsv(32, 100, 100).bold(‘Orange!’)
  • hwb - 例如: chalk.hwb(32, 0, 50).bold(‘Orange!’)
  • ansi - 例如: chalk.ansi(31).bgAnsi(93)(‘red on yellowBright’)
  • ansi256 - 例如: chalk.bgAnsi256(194)(‘Honeydew, more or less’)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/422020.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

新一代湖仓集存储,多模型统一架构,高效挖掘数据价值

星环科技TDH一直致力于给用户带来高性能、高可靠的一站式大数据基础平台,满足对海量数据的存储和复杂业务的处理需求。 同时在易用性方面持续深耕,降低用户开发和运维成本,让数据处理平民化,助力用户以更便捷、高效的方式去挖掘数…

Node.js+vue校内二手物品交易系统tdv06-vscode前后端分离

二手物品交易系统采用B/S架构,数据库是MySQL。网站的搭建与开发采用了先进的nodejs进行编写,使用了vue框架。该系统从三个对象:由管理员和用户、店铺来对系统进行设计构建。主要功能包括:个人信息修改,对用户、店铺、二…

美剧推荐|2024值得期待的二十部美剧,你心里的TOP1是哪一部

关注公众号:萌番bilfun,发送影片名称,即可获取资源链接 2023必看十部美剧推荐: 面目全非,堡垒,暗夜情报员,猎魔人第三季,阿索卡,洲际酒店,怒呛人生&#xf…

Linux 学习笔记(8)

八、 启动引导 1 、 Linux 的启动流程 1) BIOS 自检 2) 启动 GRUB/LILO 3) 运行 Linux kernel 并检测硬件 4) 挂载根文件系统 5) 运行 Linux 系统的第一个进程 init( 其 PID 永远为 1 ,是所有其它进程的父进程 ) 6) init 读取系统引导配置文件…

2D割草/吸血鬼游戏 性能优化——GPU Spine动画

视频中万人同屏方案(gpu动画、渲染、索敌、避障等功能),可某宝搜店铺:【游戏开发资源商店】获取整套方案源码。 在过去的几年里,割草、类吸血鬼玩法的游戏频出爆款,其丰富的技能、满屏特效、刷怪清屏的解压畅快是此类游戏的核心&…

uni-app部署H5到相对路径,支持file协议打开

uni-app支持部署H5到相对路径,部署到服务端或在本地使用file协议打开均可 配置 在manifest.json文件中配置,Web配置->运行的基础路径配置为./即可 例:/5/,代表在域名的/5目录下部署运行。如设为./,则代表相对路径&#xff0c…

TCP为什么要三次握手?

TCP三次握手协议是为了在不可靠的互联网环境中可靠地建立起一个连接,三次握手可以确保两端的发送和接收能力都是正常的。 那么,为什么是三次而不是二次或四次握手呢? 为什么不是二次握手? 如果是二次握手,即客户端发…

QT TCP传输文件+ui

TCPFile tcp协议传输文件 TCPFile.pro QT core gui networkclientwidget.h #include <QWidget> #include <QTcpSocket> // 通信套接字 #include <QFile>private slots:void on_pushButton_clicked();private:QTcpSocket *tcpSocket;QFile file; /…

openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划

文章目录 openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划 openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划 完成资源负载管理功能配置前&#xff0c;需要先根据业务模型完成租户资源的规划。业…

2024年10个超炫酷的前端 3D 开源项目,那几个你用?

本文将分享 10 个超炫酷的前端 3D 开源项目。从令人惊叹的视觉效果到富有创新概念的交互体验&#xff0c;这些项目展示了前端技术的无限可能。无论你是新手还是经验丰富的开发者&#xff0c;都值得一探究竟&#xff01; 蛋仔派对&#xff08;three.js版&#xff09; 利用 Rea…

安卓使用ExoPlayer出现膨胀类异常

1.导包 implementation com.google.android.exoplayer:exoplayer-core:2.15.1implementation com.google.android.exoplayer:exoplayer-ui:2.15.1 2.在Androidifest.xml加入权限&#xff0c;我这里加了忘了与读写权限 <uses-permission android:name"android.permissio…

Crime Scene Report 犯罪现场报告 Python字符串处理

Crime Scene Report 犯罪现场报告 Victim and Suspect were hiking along a remote trail in the Mojave Desert. By the time Victim and Suspect were able to hike back to the trailhead and receive medical attention, Victim was in critical condition. Suspect repor…

用HTML5的<canvas>元素实现刮刮乐游戏

用HTML5的&#xff1c;canvas&#xff1e;元素实现刮刮乐游戏 用HTML5的<canvas>元素实现刮刮乐&#xff0c;要求&#xff1a;将上面的“图层”的图像可用鼠标刮去&#xff0c;露出下面的“图层”的图像。 示例从简单到复杂。 简单示例 准备两张图像&#xff0c;我这…

鸿蒙学习day1基础语法 基础变量类型

在这里插入图片描述 什么是变量&#xff1a;变量就是一些数据 如125&#xff0c;‘字符串数据’ 通过一个符号来表示 变量的定义 方法 let 变量名&#xff1a;变量类型 ’ 各种数据’ ,let是关键字&#xff0c;系统给的用来定义变量的 let name: string 张亚洲; let age: …

《求生之路2》服务器如何选择合适的内存和CPU核心数,以避免丢包和延迟高?

根据求生之路2服务器的实际案例分析选择合适的内存和CPU核心数以避免丢包和延迟高的问题&#xff0c;首先需要考虑游戏的类型和对服务器配置的具体要求。《求生之路2》作为一款多人在线射击游戏&#xff0c;其服务器和网络优化对于玩家体验至关重要。 首先&#xff0c;考虑到游…

Flutter中Widget的生命周期

Widget生命周期&#xff1a; createState-initState-didChangeDependency-build-deactive-dispose 可通过WidgetsBinding类对widget生命周期的回调进行监控。 createState&#xff1a;StatefulWidget 中用于创建 State&#xff1b; initState&#xff1a;State 的初始化操作&am…

Ubuntu22.04下在Spark2.4.0中采用Local模式配置并启动pyspark

目录 一、前言 二、版本信息 三、配置相关文件 1.修改spark-env.sh文件 2.修改.bashrc文件 四、安装Python3.5.2并更改默认Python版本 1.查看当前默认Python版本 2.安装Python3.5.2 2.1 下载Python源码 2.2 解压源码 2.3 配置安装路径 2.4 编译和安装 2.5 验证安装…

【计算机网络_应用层】协议定制序列化反序列化

文章目录 1. TCP协议的通信流程2. 应用层协议定制3. 通过“网络计算器”的实现来实现应用层协议定制和序列化3.1 protocol3.2 序列化和反序列化3.2.1 手写序列化和反序列化3.2.2 使用Json库 3.3 数据包读取3.4 服务端设计3.5 最后的源代码和运行结果 1. TCP协议的通信流程 在之…

c++/c图的邻近矩阵表示

#include<iostream> using namespace std;#define MaxVerterNum 100 typedef char VerterType; typedef int EdgeType; typedef struct {VerterType vexs[MaxVerterNum]; // 存储顶点EdgeType edges[MaxVerterNum][MaxVerterNum]; // 存储邻接矩阵int n, e; // 顶点数和边…

基于粒子群优化算法的图象聚类识别matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于粒子群优化算法的图象聚类识别。通过PSO优化方法&#xff0c;将数字图片的特征进行聚类&#xff0c;从而识别出数字0~9. 2.测试软件版本以及运行结果展示 M…
最新文章