Style your CLI text using ANSI escape sequences.
npm install @opentf/cli-styles
> 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.
---
- 24-Bit colors only (True Color)
- Nested styles
- Auto detects CLI color support
- Supports RGB & Hex color modes
- Respects NO_COLOR & FORCE_COLOR
āļø 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.
``shell`
npm install @opentf/cli-styles
`shell`
yarn add @opentf/cli-styles
`shell`
pnpm add @opentf/cli-styles
`shell`
bun add @opentf/cli-styles
`ts`
style(str: string, options?: { color: boolean }): string;
`ts
import { style } from '@opentf/cli-styles';
const out = style('$key[.key...]{Text}');
console.log(out);
`
Using foreground color
`ts`
style(
'š - An $o{orange} is a fruit of various citrus species in the family Rutaceae.'
);

Using multiple colors
`ts`
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
`ts`
style(
"$bgbl.b{THE QUICK $g{BROWN $r.bol{CAT} JUMPED} OVER THE LAZY $r.bol{DOG}'S BACK}"
);

Composing different styles
`ts`
style('$bol.w.bgg{ PASS }');

Inverse colors
`ts`
style('$inv.r.bgw.bol{ FAILED }');

Normal vs Bold vs Dim text
`ts`
style('Normal text | $bol{Bold text} | $dim{Dimmed text}');

Italic fonts
`ts`
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
`ts`
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}');
\*Output from VS Code.
Strikethrough text
`ts`
style('Price: $str.r{\\$75.00} $g{\\$50.00}');

Code Highlighting:
`js
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('', '$fuchsia{');
html = html.replaceAll('', '$b{');
html = html.replaceAll('', '$lime{');
html = html.replaceAll('', '$y{');
html = html.replaceAll('', '');
html = html.replaceAll('', '$gr.dim{');
html = html.replaceAll('', '}');
html = decode(html);
return style(html);
}
const code =
// Comment
function greet() {
console.log('Hello World!');
};
console.log(highlight(code));
`

Using Template Literals:
`ts
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.
`ts<$hex(#39CCCC){input} name=$y{"price"} value=$y{"\\$\\{ Cost + Tax \\}.00"} />
style(
`
);

Blinking Text:
`ts`
style('$g.bol{SALE! -} $blk.r.bol{50% OFFER}');

| 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. |
| 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. |
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.
| 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 | ā
| ā
| ā
| ā
| ā
| ā
| ā
| ā
| ā
| ā
| ā
| ā
|
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/
- @opentf/std - An Extensive JavaScript Standard Library.
- @opentf/cli-pbar - The CLI progress bar.
Copyright (c) 2022, Thanga Ganapathy (MIT License).