JavaScript chalk
最后修改于 2023 年 10 月 18 日
在本文中,我们将展示如何使用 chalk 模块在 JavaScript 中设置文本样式。
chalk
是一个 Node.js 模块,用于设置文本格式的样式,并允许我们创建自己的主题。
请注意,终端可能不支持 chalk 模块的所有功能。
JS chalk 简单示例
以下示例是 chalk 模块的简单演示。
import chalk from 'chalk'; console.log(chalk.blue('an old falcon')); console.log(chalk.keyword('steelblue')('an old falcon')); console.log(chalk.keyword('khaki').bold('an old falcon'));
我们向终端输出三个彩色文本。
console.log(chalk.blue('an old falcon'));
使用 chalk.blue
,我们以蓝色输出文本。
console.log(chalk.keyword('steelblue')('an old falcon'));
使用 keyword
,我们可以使用颜色的名称。
console.log(chalk.keyword('khaki').bold('an old falcon'));
chalk
支持链式 API;文本以粗体卡其色显示。
JS chalk 基本文本颜色
chalk 模块具有用于基本文本颜色的函数。
import chalk from 'chalk'; console.log(chalk.red('An old falcon')); console.log(chalk.blue('An old falcon')); console.log(chalk.green('An old falcon')); console.log(chalk.cyan('An old falcon')); console.log(chalk.white('An old falcon')); console.log(chalk.redBright('An old falcon')); console.log(chalk.greenBright('An old falcon'));
在示例中,我们以基本颜色输出文本。
console.log(chalk.red('An old falcon'));
我们以红色输出文本。
console.log(chalk.redBright('An old falcon'));
在这里,我们以鲜红色输出文本。
JS chalk 背景颜色
我们可以更改文本背景的颜色。
import chalk from 'chalk'; console.log(chalk.bgRed('An old falcon')); console.log(chalk.bgBlue('An old falcon')); console.log(chalk.bgWhite.blue('An old falcon')); console.log(chalk.bgWhiteBright.red('An old falcon')); console.log(chalk.bgHex('#456323')('An old falcon'));
在示例中,我们更改输出的背景颜色。
console.log(chalk.bgRed('An old falcon'));
使用 bgRed
,我们将背景颜色更改为红色。
console.log(chalk.bgWhite.blue('An old falcon'));
我们将背景颜色更改为白色。 由于默认文本颜色也是白色,我们将其更改为蓝色。
console.log(chalk.bgHex('#456323')('An old falcon'));
我们可以使用 bgHex
选择我们的自定义背景颜色。
JS chalk 颜色模式
在 chalk 中,我们可以使用几种颜色模式。
import chalk from 'chalk'; console.log(chalk.rgb(232, 34, 122)('An old falcon')); console.log(chalk.hex('#943255')('An old falcon')); console.log(chalk.ansi(245)('An old falcon')); console.log(chalk.hsv(125, 8, 61)('An old falcon'));
在示例中,我们使用 RGB、HEX、ANSI 和 HSV 模式。
JS chalk 修饰符
chalk 支持几个修饰符,包括粗体、斜体和下划线。
import chalk from 'chalk'; console.log(chalk.bold('An old falcon')); console.log(chalk.dim('An old falcon')); console.log(chalk.italic('An old falcon')); console.log(chalk.underline('An old falcon')); console.log(chalk.inverse('An old falcon')); console.log(chalk.strikethrough('An old falcon')); console.log('----------------------'); console.log(chalk.bold.italic('An old falcon')); console.log(chalk.dim.italic('An old falcon'));
该示例使用几个 chalk 修饰符。这些也可以组合使用。 例如,chalk.bold.italic
创建粗体和斜体文本。
JS chalk 模板字面量
chalk 模块可以在模板字面量中使用。 模板字面量是允许嵌入表达式的字符串字面量。 占位符中的表达式和反引号之间的文本 (` `)。
import chalk from 'chalk'; console.log(`${chalk.red('old falcon')}`); console.log(`${chalk.blue('old falcon')}`); console.log(`${chalk.dim.underline('old falcon')}`);
在示例中,我们使用 chalk 和 JS 模板字面量输出三行。
JS chalk 标记的模板字面量
标记的模板字面量是模板字面量的更高级形式。
import chalk from 'chalk'; console.log(chalk`{red old falcon}`); console.log(chalk`{blue old falcon}`); console.log(chalk`{dim.underline old falcon}`);
该示例将 chalk 模块与标记的模板字面量结合使用。
来源
在本文中,我们使用 chalk 模块在 JavaScript 中设置了文本样式。