cli 界面制作、颜色计算工具 - JC Color

简介: 本文介绍一款 cli 界面制作、颜色计算工具 - JC Color

cli 界面制作、颜色计算工具 - JC Color

帮你在 NodeJS、Borwser 中制作漂亮的炫彩控制台


homepagehttp://thispage.tech:9680/jclee1995/jc-color

githubhttps://github.com/jacklee1995/jc-color

npmhttps://www.npmjs.com/package/jc-color

=> 转目录

效果展示

99999999999999999.gif

why do it

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

features/特征

jc-color 工具

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

目 录


预览图

1. 安装

2. 快速入门

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


6666666666666.png


1. 安装

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

2. 快速入门

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

99999999999999999.gif

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月前
vscode编辑器使用拓展插件background添加背景图片改变外观
vscode编辑器使用拓展插件background添加背景图片改变外观
92 0
|
9月前
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
108 0
|
1月前
ps中扩展画布的时候,不能选择扩展画布部分的颜色解决方法
ps中扩展画布的时候,不能选择扩展画布部分的颜色解决方法
124 0
|
10月前
vue3_制作一个在线修改svg颜色功能
vue3_制作一个在线修改svg颜色功能
156 1
|
5月前
echarts仪表盘更换样式全圆形换成半圆
echarts仪表盘更换样式全圆形换成半圆
46 0
|
8月前
|
前端开发
Color Space -- 在线调色神器,解决你的配色问题
Color Space -- 在线调色神器,解决你的配色问题
321 0
|
10月前
|
C++
Vs+Qt 界面添加背景图的两种方式(非常实用)
Vs+Qt 界面添加背景图的两种方式(非常实用)
|
11月前
|
前端开发 JavaScript 程序员
前端通过range制作的rgba配色小工具
制作一个针对视觉的产品,快速调出想要的颜色,然后写在给前端程序员的文档里,方便前端程序员进行页面的配色处理[滑稽]
Revit二次开发—修改元素的Material Color(图形颜色)
Revit二次开发—修改元素的Material Color(图形颜色)
Revit二次开发—修改元素的Material Color(图形颜色)
Pycharm的相关配置:改字体样式和大小、更改图片背景、更改控制台输出的字体颜色
Pycharm的相关配置:改字体样式和大小、更改图片背景、更改控制台输出的字体颜色
Pycharm的相关配置:改字体样式和大小、更改图片背景、更改控制台输出的字体颜色