Skip to content

Open-Tech-Foundation/js-cli-styles

Repository files navigation

Β OPEN TECH FOUNDATION

CLI Styles

Build

Style your CLI text using ANSI escape sequences.

Try it online at https://node-repl.pages.dev


πŸš€ @opentf/std - An Extensive JavaScript Standard Library. Please review and give feedback.


Features

  • 24-Bit colors only (True Color)

  • Nested styles

  • Auto detects CLI color support

  • Supports RGB & Hex color modes

  • Respects NO_COLOR & FORCE_COLOR

Supported Terminals (Popular)

βœ”οΈ GNOME Terminal

βœ”οΈ Konsole

βœ”οΈ xfce4-terminal

βœ”οΈ MATE Terminal

βœ”οΈ iTerm2

βœ”οΈ VS Code

βœ”οΈ Tabby

βœ”οΈ Hyper

βœ”οΈ Alacritty

βœ”οΈ Contour

βœ”οΈ kitty

βœ”οΈ WezTerm

βœ”οΈ Windows Terminal

❌ Terminal.app

*Missing your favorite terminal emulators here? Please give a PR or file an issue in Github.

Installation

npm install @opentf/cli-styles
yarn add @opentf/cli-styles
pnpm add @opentf/cli-styles
bun add @opentf/cli-styles

Syntax

style(str: string, options?: { color: boolean }): string;

Usage

import { style } from '@opentf/cli-styles';

const out = style('$key[.key...]{Text}');
console.log(out);

Examples

Using foreground color

style(
  '🍊 - An $o{orange} is a fruit of various citrus species in the family Rutaceae.'
);

Using multiple colors

style(
  '$bgy.bl{The $r.bol{R}$g.bol{G}$b.bol{B} color model is an additive color model in which the $r.bol{red}, $g.bol{green} and $b.bol{blue} primary colors of light are added together in various ways to reproduce a broad array of colors.}'
);

Nested colors

style(
  "$bgbl.b{THE QUICK $g{BROWN $r.bol{CAT} JUMPED} OVER THE LAZY $r.bol{DOG}'S BACK}"
);

Composing different styles

style('$bol.w.bgg{ PASS }');

Inverse colors

style('$inv.r.bgw.bol{ FAILED }');

Normal vs Bold vs Dim text

style('Normal text | $bol{Bold text} | $dim{Dimmed text}');

Italic fonts

style(
  '$ita.fuchsia.bol.bgw{"This poem is endless,\n the odds against us are endless,\n our chances of being alive together statistically nonexistent;\n still we have made it"}'
);

Underlined texts

style('$und{Straight underline}');
style('$und{Straight $nou{(No underline here)}  underline}');
style('$dbu{Double underline}');
style('$cru{Curly underline}');
style('$dou{Dotted underline}');
style('$dau{Dashed underline}');
style('$und.ug{Straight underline colored}');
style('$dbu.uy{Double underline colored}');
style('$cru.ur{Curly underline colored}');
style('$dou.ub{Dotted underline colored}');
style('$dau.uo{Dashed underline colored}');
style('$und.urgb(100,200,255){Straight underline RGB colored}');
style('$und.ub{Straight $ruc{underline reset} colored}');

Underline Demo

*Output from VS Code.

Strikethrough text

style('Price: $str.r{\\$75.00} $g{\\$50.00}');

Code Highlighting:

import { style } from '@opentf/cli-styles';
import hljs from 'highlight.js';
import { decode } from 'html-entities';

function highlight(code) {
  let html = hljs.highlight(code, {
    language: 'js',
  }).value;
  html = html.replaceAll('<span class="hljs-keyword">', '$fuchsia{');
  html = html.replaceAll('<span class="hljs-variable language_">', '$b{');
  html = html.replaceAll('<span class="hljs-title function_">', '$lime{');
  html = html.replaceAll('<span class="hljs-string">', '$y{');
  html = html.replaceAll('<span class="hljs-params"></span>', '');
  html = html.replaceAll('<span class="hljs-comment">', '$gr.dim{');
  html = html.replaceAll('</span>', '}');
  html = decode(html);
  return style(html);
}

const code = `
// Comment
function greet() {
  console.log('Hello World!');
}
`;

console.log(highlight(code));

Using Template Literals:

const cpu = 90;
const ram = 40;
const disk = 70;

const getColor = (n) => (n <= 50 ? 'g' : n > 50 && n <= 70 ? 'y' : 'r');

style(`
 CPU: $${getColor(cpu)}{${cpu}%}
 RAM: $${getColor(ram)}{${ram}%}
DISK: $${getColor(disk)}{${disk}%}
`);

Escape characters:

Use double back slashes to escape a character in the string.

style(
  `<$hex(#39CCCC){input} name=$y{"price"} value=$y{"\\$\\{ Cost + Tax \\}.00"} />`
);

Blinking Text:

style('$g.bol{SALE! -} $blk.r.bol{50% OFFER}');

Color Keys

Key Description
r Red - rgb(255,65,54)
g Green - rgb(46,204,64)
b Blue - rgb(0,116,217)
o Orange - rgb(255,133,27)
y Yellow - rgb(255,220,0)
w White - rgb(255,255,255)
m Magenta - rgb(255,105,193)
c Cyan - rgb(154, 236, 254)
n Navy - rgb(0,31,63)
a Aqua - rgb(127,219,255)
t Teal - rgb(57,204,204)
p Purple - rgb(177,13,201)
f Fuchsia - rgb(240,18,190)
s Silver - rgb(221,221,221)
ma Maroon - rgb(133,20,75)
ol Olive - rgb(61,153,112)
li Lime - rgb(1,255,112)
bl Black - rgb(17,17,17)
gr Grey - rgb(170,170,170)
pi Pink - rgb(255, 191, 203)
rgb(red, green, blue) The RGB foreground colors, Eg: rgb(255,0,0) for red color.
urgb(red, green, blue) The RGB underlined colors, Eg: urgb(255, 255, 0) for yellow underlined color.
hex(#------) The 6-digit Hex colors, Eg: hex(#00ff00) for green color.
bg* The background colors can be applied with prefix bg to any color keys.
Eg:
bgw for white bg
bgrgb(0,0,0) for black bg
bghex(#0000FF) for blue bg
u* The underline colors.

Modifier Keys

Key Description
res Reset all attributes to normal.
nor Normal intensity Neither bold nor dim.
bol Bold or increased intensity text.
dim Dimmed or decreased intensity text.
ita Italic text.
inv Swap foreground and background colors.
noi Not inversed.
str Strikethrough text.
nos Not Strikethrough text.
hid Hidden text.
vis Visible text.
und Straight underline text.
nou No Underlined text.
dbu Doubly Underlined text.
cru Curly Underlined text.
dou Dotted Underlined text.
dau Dashed Underlined text.
ruc Reset Underlined text color.
ovl Overlined text.
noo Not Overlined text.
blk Blinking text.
nob No Blinking text.

Color Overrides

You can disable colors/styles by the following methods:

  • Pass color option false to the style function.

  • Pass --no-color or --color=false to the process arguments.

  • Set FORCE_COLOR=0 in enviroment variables.

You can force enable colors/styles by setting FORCE_COLOR=3 in enviroment variables.

Modifier Keys Supported Terminals

Supported Terminals res nor bol dim ita inv str hid ovl blk und dbu
Gnome Terminal βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Konsole βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… ❌
xfce4-terminal βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
MATE Terminal βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
iTerm2 βœ… βœ… βœ… βœ… βœ… βœ… βœ… ❌ ❌ ❌ βœ… ❌
VS Code βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… ❌ βœ… βœ…
Tabby βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… ❌ ❌ βœ… βœ…
Hyper βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… ❌ ❌ βœ… ❌
Alacritty βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… ❌ ❌ βœ… ❌
Contour βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
kitty βœ… βœ… βœ… βœ… ❌ βœ… βœ… ❌ ❌ ❌ βœ… βœ…
WezTerm βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Windows Terminal βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…

References

https://en.wikipedia.org/wiki/ANSI_escape_code

https://github.com/termstandard/colors

https://no-color.org/

https://nodejs.org/api/cli.html#force_color1-2-3

https://clrs.cc/

https://developer.chrome.com/docs/devtools/console/format-style/

Related

License

Copyright (c) 2022, Thanga Ganapathy (MIT License).