JavaScript chalk 教程展示了如何使用 chalk 模块在 JavaScript 中设置文本样式。
chalk
是一个 Node.js 模块,用于设置文本格式的样式并允许我们创建自己的主题。
请注意,终端可能不支持 chalk 模块的所有功能。
JS粉笔简单例子
下面的例子是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 基本文字颜色
粉笔模块具有基本文本颜色的功能。
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 粉笔背景色
我们可以改变文本背景的颜色。
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 粉笔颜色模式
在粉笔中,我们可以使用多种颜色模式。
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 粉笔修饰符
粉笔支持多种修饰符,包括粗体、斜体和下划线。
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.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 中设置了文本样式。
列出所有 JavaScript 教程。