cli 开发工具 - NodeJS、Borwser 中制作漂亮的炫彩控制台

简介: cli 开发工具 - NodeJS、Borwser 中制作漂亮的炫彩控制台


cli 界面制作、颜色计算工具 - JC Color
帮你在 NodeJS、Borwser 中制作漂亮的炫彩控制台

=> 转目录

效果展示

why do it

前几天在调试代码时由于代码中的状态机递归处理本文,一些打印出来的错误很难排查到具体的位置。原本是做了一个及其简单的高亮模块,觉得挺有意思。于是索性将其功能进行完善,独立为一个项目。

features/特征

jc-color 工具

  • 真彩色/256色 支持;
  • 跨运行时,可以在浏览器、NodeJS运行时中运行,且效果比较统一;
  • 无依赖模块,不需要任何其它模块,可以完全独立使用。意味着你可以在无网络环境复制单个模块进行安装,而不要考虑层层依赖;
  • 全面的预定义颜色,囊括了全部一百四十多个CSS颜色名。这些颜色名不但可以作为表示颜色的值传给文本对象,也可以直接以将他们作为函数名来创建彩色单元;请参考附录和WS3文档《命名颜色》《定义的命名颜色》
  • 功能全面,弥补了 chalk 模块在浏览器环境中无法使用 overline,在NodeJS中无法使用闪烁,不具备渐变色、反转色、反色输出功能。相对于 chalk 只能输出文本,jc-color 本身还是一个颜色处理模块,具备各种颜色的计算和处理函数,包括调色、颜色生成等等。在开发时,你不仅可以使用它在辅助进行颜色计算,还可以在终端边对某些效果预览。

目 录


预览图

1. 安装

2. 快速入门

附录 - 内置 颜色名/颜色函数 表



1. 安装

# use npm
npm install jc-color
# use yarn
yarn add jc-color
# use pnpm
pnpm install jc-color

2. 快速入门

你可能使用过 chalk 等多个模块实现过其中部分功能,但是功能比较零散,支持度不够好。然而现在你可以同时在 浏览器控制台NodeJS 中通过一个模块完成字体、颜色。

import { createUnit, createText, geadientText, blue, lime, crimson, firebrick, print } from 'jc-color'
print('--------------------------------------------------')
geadientText("你好呀!欢迎使用 JC Color!").underline().italic().print()
print('--------------------------------------------------')
geadientText("这是一款涵盖颜色计算、处理与终端输出的工具",["red", "blue","#EB6461","green","rgb(128, 80, 252)"]).underline_double().print()
geadientText("它同时兼容 NodeJS 与 Web 环境,在终端打印上的功能尤其丰富,并且没有任何模块依赖。",["#84FC2C","yellow"],["red", "blue","#EB6461","green"]).glimmer().print()
createText(
 "\n你可以使用",
  createUnit(" Hex、","#EB6461"),
  createUnit(" Rgb 来设置颜色、","rgb(62, 122, 234)"),
  " 具有 256色/真彩色 支持!",
  createUnit("\n这里包含了一百多个内置颜色名来设置你的颜色、","Yellow"),
  createUnit(" 可以使用高亮/加粗体、").bold(),
  createUnit(" 可以 暗体。").dark(),
  "\n还有 ",
  blue("斜体字、").orangeBg().italic(),
  createUnit(" 下划线、","tomato").underline(),
  createUnit(" 双下划线、","teal").underline_double(),
  lime("闪烁体(仅Node)、").bg("#cdcdcd").glimmer(),
).print()
crimson("\n你还可以使用").blueBg().print()
.reverse("反转色:前景色和背景色互换").print()
blue("\n以及反色:").redBg().print()
.inverseFore("包括前景色的反色").print().remove_inverseFore()
.inverseBg("和背景色的反色").print().remove_inverseFore()
.inverse("背景色和前景色同时反色").print()

附录 - 内置 颜色名/颜色函数 表

本节中的颜色可以作为字符串传入需要表示颜色的地方,也可以作为函数导入,例如:

import { red, blue } from 'jc-color';
red('some text.').print();
blue("some text.").redBg().print()
color names hex color value Effect preview color names hex color value Effect preview
black #000000
#000000
navy #000080
#000080
darkblue #00008B
#00008B
mediumblue #0000CD
#0000CD
blue #0000FF
#0000FF
darkgreen #006400
#006400
green #008000
#008000
teal #008080
#008080
darkcyan #008B8B
#008B8B
deepskyblue #00BFFF
#00BFFF
darkturquoise #00CED1
#00CED1
mediumspringgreen #00FA9A
#00FA9A
lime #00FF00
#00FF00
springgreen #00FF7F
#00FF7F
aqua #00FFFF
#00FFFF
cyan #00FFFF
#00FFFF
midnightblue #191970
#191970
dodgerblue #1E90FF
#1E90FF
lightseagreen #20B2AA
#20B2AA
forestgreen #228B22
#228B22
seagreen #2E8B57
#2E8B57
darkslategray #2F4F4F
#2F4F4F
limegreen #32CD32
#32CD32
mediumseagreen #3CB371
#3CB371
turquoise #40E0D0
#40E0D0
royalblue #4169E1
#4169E1
steelblue #4682B4
#4682B4
mediumturquoise #48D1CC
#48D1CC
darkslateblue #483D8B
#483D8B
indigo #4B0082
#4B0082
darkolivegreen #556B2F
#556B2F
cadetblue #5F9EA0
#5F9EA0
cornflowerblue #6495ED
#6495ED
mediumaquamarine #66CDAA
#66CDAA
dimgray #696969
#696969
slateblue #6A5ACD
#6A5ACD
olivedrab #6B8E23
#6B8E23
slategray #708090
#708090
lightslategray #778899
#778899
mediumslateblue #7B68EE
#7B68EE
lawngreen #7CFC00
#7CFC00
chartreuse #7FFF00
#7FFF00
aquamarine #7FFFD4
#7FFFD4
maroon #800000
#800000
purple #800080
#800080
olive #808000
#808000
gray #808080
#808080
lightskyblue #87CEFA
#87CEFA
skyblue #87CEEB
#87CEEB
blueviolet #8A2BE2
#8A2BE2
darkred #8B0000
#8B0000
darkmagenta #8B008B
#8B008B
saddlebrown #8B4513
#8B4513
darkseagreen #8FBC8F
#8FBC8F
lightgreen #90EE90
#90EE90
mediumpurple #9370DB
#9370DB
darkviolet #9400D3
#9400D3
palegreen #98FB98
#98FB98
darkorchid #9932CC
#9932CC
yellowgreen #9ACD32
#9ACD32
sienna #A0522D
#A0522D
brown #A52A2A
#A52A2A
darkgray #A9A9A9
#A9A9A9
lightblue #ADD8E6
#ADD8E6
greenyellow #ADFF2F
#ADFF2F
paleturquoise #AFEEEE
#AFEEEE
lightsteelblue #B0C4DE
#B0C4DE
firebrick #B22222
#B22222
darkgoldenrod #B8860B
#B8860B
mediumorchid #BA55D3
#BA55D3
rosybrown #BC8F8F
#BC8F8F
darkkhaki #BDB76B
#BDB76B
indianred #CD5C5C
#CD5C5C
goldenrod #DAA520
#DAA520
palevioletred #DB7093
#DB7093
crimson #DC143C
#DC143C
lavender #E6E6FA
#E6E6FA
darksalmon #E9967A
#E9967A
palegoldenrod #EEE8AA
#EEE8AA
lightcoral #F08080
#F08080
aliceblue #F0F8FF
#F0F8FF
honeydew #F0FFF0
#F0FFF0
wheat #F5DEB3
#F5DEB3
deeppink #FF1493
#FF1493
darkorange #FF8C00
#FF8C00
gold #FFD700
#FFD700
peachpuff #FFDAB9
#FFDAB9
papayawhip #FFEFD5
#FFEFD5
powderblue #B0E0E6
#B0E0E6
chocolate #D2691E
#D2691E
tan #D2B48C
#D2B48C
lightgray #D3D3D3
#D3D3D3
silver #C0C0C0
#C0C0C0
mediumvioletred #C71585
#C71585
fuchsia #C83293
#C83293
peru #CD853F
#CD853F
thistle #D8BFD8
#D8BFD8
orchid #DA70D6
#DA70D6
gainsboro #DCDCDC
#DCDCDC
plum #DDA0DD
#DDA0DD
burlywood #DEB887
#DEB887
lightcyan #E0FFFF
#E0FFFF
violet #EE82EE
#EE82EE
khaki #F0E68C
#F0E68C
azure #F0FFFF
#F0FFFF
beige #F5F5DC
#F5F5DC
whitesmoke #F5F5F5
#F5F5F5
mintcream #F5FFFA
#F5FFFA
ghostwhite #F8F8FF
#F8F8FF
salmon #FA8072
#FA8072
sandybrown #FAA460
#FAA460
antiquewhite #FAEBD7
#FAEBD7
linen #FAF0E6
#FAF0E6
lightgoldenrodyellow #FAFAD2
#FAFAD2
oldlace #FDF5E6
#FDF5E6
red #FF0000
#FF0000
magenta #FF00FF
#FF00FF
orangered #FF4500
#FF4500
tomato #FF6347
#FF6347
hotpink #FF69B4
#FF69B4
coral #FF7F50
#FF7F50
lightsalmon #FFA07A
#FFA07A
orange #FFA500
#FFA500
lightpink #FFB6C1
#FFB6C1
pink #FFC0CB
#FFC0CB
navajowhite #FFDEAD
#FFDEAD
moccasin #FFE4B5
#FFE4B5
bisque #FFE4C4
#FFE4C4
mistyrose #FFE4E1
#FFE4E1
blanchedalmond #FFEBCD
#FFEBCD
lavenderblush #FFF0F5
#FFF0F5
seashell #FFF5EE
#FFF5EE
cornsilk #FFF8DC
#FFF8DC
lemonchiffon #FFFACD
#FFFACD
floralwhite #FFFAF0
#FFFAF0
snow #FFFAFA
#FFFAFA
yellow #FFFF00
#FFFF00
lightyellow #FFFFE0
#FFFFE0
ivory #FFFFF0
#FFFFF0
white #FFFFFF
#FFFFFF
目录
相关文章
|
6月前
|
JavaScript 前端开发 算法
Node.js 艺术:用代码打印出绚丽多彩的控制台柱状图
Node.js 艺术:用代码打印出绚丽多彩的控制台柱状图
89 0
|
6月前
|
开发工具
【开发工具】解决 Goland 控制台输出错位问题
【开发工具】解决 Goland 控制台输出错位问题
252 0
|
移动开发 算法 前端开发
node封装一个控制台进度条插件
node封装一个控制台进度条插件
133 0
|
JavaScript
基于node.js开发的文章生成器(四、控制台版本的文章生成器)
> 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 引言 通过前面的学习,随机句子的选取,段落的生成,文章的生成,我们都已经学会了。接下来我们本次来学习控制台版的狗屁不通文章生成器。 # readline模块的学习与尝试 接下来我们来学习并练习使用readline模块。readline模块是node7之后便开始提供的模块。 接下来我们来详细说说这个模块 #
|
JavaScript 开发工具
【开发工具】sublime配置node.js的运行环境
【开发工具】sublime配置node.js的运行环境
118 0
【开发工具】sublime配置node.js的运行环境
|
监控 JavaScript 前端开发
修改V8和node.js建立中文后端开发工具
修改V8编译器源码, 实现关键词的中文化. Modify source code of V8 JavaScript compiler to support keywords in Chinese.
722 0
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript IDE
【Node.js】2.开发Node.js选择哪个IDE 开发工具呢
安装完Node.js之后,就要为它选择一个有利的IDE用于开发。 相比较了多个IDE之后,定位在webstrom和sublime上。 有一个简单的比较: webstorm功能很丰富,前端开发工具的集大成者,相比sublime稍重一些 sublime插件也很丰富,界面也比较美观,很轻量,也有简单的project管理功能 这里选择使用sublime作为Node.js的开发工具。
1429 0
|
移动开发 JavaScript 前端开发
2015年最佳的15个 Node.js 开发工具
  Node.js 越来月流行,这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。在本文中,我们列出了2015年最佳的15个 Node.js 开发工具。这些工具对于刚刚开始学习 Node.js 的新手开发者非常有帮助。
1001 0
|
2月前
|
JavaScript
NodeJs的安装
文章介绍了Node.js的安装步骤和如何创建第一个Node.js应用。包括从官网下载安装包、安装过程、验证安装是否成功,以及使用Node.js监听端口构建简单服务器的示例代码。
NodeJs的安装