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

news2025/1/22 19:33:13


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

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

homepage:http://thispage.tech:9680/jclee1995/jc-color
github:https://github.com/jacklee1995/jc-color
npm:https://www.npmjs.com/package/jc-color

=> 转目录

效果展示
在这里插入图片描述

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

features/特征
jc-color 工具

  • 真彩色/256色 支持;
  • 无依赖模块,不需要任何其它模块,可以完全独立使用;
  • 跨运行时,可以在浏览器、NodeJS运行时中运行,且效果比较统一;
  • 弥补了 chalk 模块在浏览器环境中无法使用 overline,在NodeJS中无法使用闪烁,不具备渐变色、反转色、反色输出功能;
  • 全面的预定义颜色,囊括了全部一百四十多个CSS颜色名。这些颜色名不但可以作为表示颜色的值传给文本对象,也可以直接以将他们作为函数名来创建彩色单元;请参考附录和WS3文档《命名颜色》、《定义的命名颜色》
  • 功能全,相对于 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 nameshex color valueEffect previewcolor nameshex color valueEffect 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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年场外个股期权研究报告

第一章 概况 场外个股期权(Over-the-Counter Equity Option),是指由交易双方根据自己的需求和意愿,通过协商确定行权价格、行权日期等条款的股票期权。与交易所交易的标准化期权不同,场外个股期权的合同内容可以根据交…

轻松学会css变量

css变量太无敌啦css变量是啥?css变量的语法css变量的使用场景主体切换响应式设计统一风格动态效果展示一下css变量是啥? CSS变量是一种用于存储和重复使用值的方法。它们可以在选择器中声明,并在整个样式表中使用。使用CSS变量可以提高代码的…

Kettle工具通过JNDI连接Oracle集群

我们在用Kettle ETL工具的时候,可能会遇到数据库为Oracle集群的模式,或者有时候目标库为oracle,在持续的循环调度中,经常发现oracle的数据库连接中断的情况,此时,在Kettle中有一个JNDI的连接方式能很好的解…

【LeetCode每日一题】——376.摆动序列

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【题目提示】八【题目进阶】九【时间频度】十【代码实现】十一【提交结果】一【题目类别】 贪心算法 二【题目难度】 中等 三【题目编号】 376.摆动序列 四【题目描述】…

数据结构(八)排序

一、排序的概念以及引用概念排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。稳定性:假定在待排序的记录序列中,存在多个具有相同的关键字的记录,…

2023.2.27-3.5 AI行业周刊(第139期):裁员?主动选择or被动选择?

上周五晚和一个好朋友见面,他在一家AI公司做首席科学家。 聊天的时候,讨论到一个话题:40岁之后的人生,如何才能过的更舒适,不焦虑? 我和他都是90年左右,已经是往不惑之年奔赴的年纪了&#xf…

dbever连接kerberos认证的hbase

文章目录一、本地安装kerberos客户端二、本地kerberos客户端登录三、dbever连接habse一、本地安装kerberos客户端 下载地址:https://web.mit.edu/kerberos/dist/index.html 安装:下一步或者自定义安装即可 安装后会自动生成配置文件:C:\Pr…

[vue]提供一种网站底部备案号样式代码

演示 vue组件型&#xff08;可直接用&#xff09; 组件代码&#xff1a;copyright-icp.vue <template><div class"icp">{{© ${year} ${author} }}<a href"http://beian.miit.gov.cn/" target"_blank">{{ record }}</a…

从零开始学架构——架构设计的目的

软件架构的历史背景 软件架构真正流行是从20世纪90年代开始的&#xff0c;由于在Rational和Microsoft内部的相关活动&#xff0c;软件架构的概念开始越来越流行。 卡内基梅隆高校的玛丽肖(Mary Shaw)和戴维加兰 (David Garlan)对软件架构做了许多讨论,他们在 1994 年的一篇文章…

408考研计算机之计算机组成与设计——知识点及其做题经验篇目2:指令系统

今天我们来讲一讲指令系统里面的知识点以及做题技巧 1、定义 考点1&#xff1a;指令定义 指令是指示计算机执行某种操作的命令&#xff0c;一台计算机的所有指令的集合构成该机的指令系统&#xff0c;也称为指令集。指令系统是指令集体系结构ISA中最核心的部分&#xff0c;ISA…

The eXtensible Markup Language (XML)

文章目录前言No.1 - XML 基础概念① 简介No.2 - XML 序列形式与树形式的转换① 一般形式转换② nesting elements 的转换③ 当元素含有属性时的转换总结前言 本系列是 COMPSCI 752 的笔记总结&#xff0c;本文为第一篇&#xff0c;XML No.1 - XML 基础概念 ① 简介 XML 指可…

springboot项目中Quartz

下面内容大家可在自己创建的 springboot项目中 玩1 定时清理垃圾图片定时任务组件Quartz,可以根据我们设定的周期&#xff0c;定时执行目标任务计划1.1 Quartz介绍&#xff08;了解&#xff09;Quartz是Job scheduling&#xff08;作业调度&#xff09;领域的一个开源项目&…

树莓派3B搭建HomeAssistant,alist,cpolar,plex,transmission

一、手把手教学树莓派搭建homeassistant环境&#xff1a;内存卡16G&#xff0c;树莓派3B&#xff0c;官方工具烧写镜像&#xff0c;我烧的是树莓派系统&#xff0c;设置里面填写用户名密码&#xff0c;WiFi和密码&#xff0c;同时打开SSH服务。安装docker树莓派使用ssh连接了 先…

C++基础了解-05-C++常量

C常量 一、C常量 常量是固定值&#xff0c;在程序执行期间不会改变。这些固定的值&#xff0c;又叫做字面量。 常量可以是任何的基本数据类型&#xff0c;可分为整型数字、浮点数字、字符、字符串和布尔值。 常量就像是常规的变量&#xff0c;只不过常量的值在定义后不能进…

uni-app框架基础知识

uni-app框架基础知识 uniapp就是vue开发&#xff0c;可以使用vue2和vue3的语法&#xff0c;另外编译和运行都最好在HBuilderX中进行生命周期可以使用vue或者小程序的生命周期不同&#xff1a; 最好不要使用vue的路由&#xff0c;直接使用uniapp的路由&#xff08;它和小程序一…

项目实战典型案例8——让软件的使用者成为软件的设计者

让软件的使用者成为软件的设计者一&#xff1a;背景介绍二&#xff1a;思路&方案公司的产品设计理念如果你设计的软件猪不能使&#xff0c;你就是猪让每一个软件的使用者都成为我们软件的设计者过程四&#xff1a;总结五&#xff1a;升华一&#xff1a;背景介绍 由于同时对…

2020蓝桥杯真题反倍数 C语言/C++

题目描述 给定三个整数 a,b,c&#xff0c;如果一个整数既不是 a 的整数倍也不是 b 的整数倍还不是 c 的整数倍&#xff0c;则这个数称为反倍数。 请问在 1 至 n 中有多少个反倍数。 输入描述 输入的第一行包含一个整数 n。 第二行包含三个整数a,b,c&#xff0c;相邻两个数之…

Stimulsoft Dashboards.WEB 23.1.8 完美Patch

Stimulsoft Dashboards.WEB 在 Web 应用程序中创建仪表板 Stimulsoft Dashboards.WEB 是一种工具&#xff0c;用于在 ASP.NET、.NET Core、ASP.NET MVC 和 Blazor 平台上开发的 Web 应用程序中创建、编辑、导出和查看仪表板。该产品包括各种数据分析和可视化元素&#xff0c;可…

花括号展开II[栈模拟dfs]

栈模拟dfs前言一、花括号展开II二、栈模拟dfs总结参考资料前言 递归调用&#xff0c;代码非常的简洁。但是可以通过显式栈来模拟栈中的内容&#xff0c;锻炼自己的代码能力&#xff0c;清楚知道栈帧中需要的内容。 一、花括号展开II 二、栈模拟dfs 每碰到一个左括号&#xf…

sheng的学习笔记-服务熔断与降级组件Hystrix

在微服务架构中&#xff0c;一个应用往往由多个服务组成&#xff0c;这些服务之间相互依赖&#xff0c;依赖关系错综复杂。例如一个微服务系统中存在 A、B、C、D、E、F 等多个服务&#xff0c;它们的依赖关系如下图。图1&#xff1a;服务依赖关系通常情况下&#xff0c;一个用户…