Create, manage styles for console.
Installation is done using the
npm install command:
$ npm install styled-terminalvia ES6:
import * as style from "styled-terminal.js";Style object structure is consist of style properties.
type StyleObject = {
weight?: "bold" | "light" | "auto";
style?: "italic";
decoration?: "underline" | "crossed" | "overline";
foreground?: Color;
background?: Color;
color?: Color;
bg?: Color;
underlineColor?: Color;
visibility?: "hidden" | "visible";
border?: "box" | "circle";
font?:
| "0"
| "1"
| "2"
| "3"
| "4"
| "5"
| "6"
| "7"
| "8"
| "9"
| "10"
| "fraktur"
| "gothic";
blink?: "slow" | "fast";
colorMode?: "auto" | "invert";
};The weight property sets how thick or thin characters in text should be displayed, it can be set to either 'bold' or 'light'.
The colorMode property sets how the color should be displayed, it can be set to either 'auto' or 'invert'.
The colorMode property specifies whether or not a text is visible, it can be set to either 'visible' or 'hidden'.
The decoration property specifies what decoration will be added to the text, it can be set to either 'underline' or 'overline' or 'crossed' or a combination separated by space, for example, 'overline underline'.
The style property specifies what style will be added to the text, it can be set to either 'italic'.
The border property specifies what border will be added to the text, it can be set to either 'box' or 'circle'.
The font property specifies what font will be used, it can be set to any number between 0-20 as string.
The blink property enables blink animation and specifies it speed, it can be set to either 'slow' or 'fast'
The foreground property specifies the color of text, it can only receive Color.
The background property sets the background color of a text, it can only receive Color.
The underlineColor property sets the underline color of a text, it can only receive Color.
type BaseColors =
| "black"
| "red"
| "green"
| "yellow"
| "blue"
| "magenta"
| "cyan"
| "white";
type Color =
| BaseColors
| "rand"
| "random"
| "random normal"
| "random semi-bright"
| "random bright"
| "random semi-dark"
| "random dark"
| "rand normal"
| "rand semi-bright"
| "rand bright"
| "rand semi-dark"
| "rand dark"
| "#000000"
| "rgb(0,0,0)"
| "hsl(0,0%,0%)";- Basic Colors
- 'black'
- 'red'
- 'green'
- 'yellow'
- 'blue',
- 'magenta'
- 'cyan'
- 'white'
- rand|random - Set to a random color.
- HEX Color - '#RRGGBB', RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
- RGB Color - 'rgb(red,green,blue)', Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.
- HSL Color - 'hsl(h,s%,l%)', HSL stands for hue, saturation, and lightness.
- Hue is a degree on the color wheel from 0 to 360.
- Saturation is a percentage value, 0% means a shade of gray and 100% is the full color.
- Lightness is also a percentage; 0% is black, 100% is white.
Apply style on a given string.
Returns styled string.
import * as style from "styled-terminal.js"; // ES6
const styleObject = {...};
let result;
result = style.apply('Hello World!', styleObject);
// OR
result = "Hello World!".style(styleObject);
console.log(result); // prints the styled string.Apply preset (pre-made design) on a given string.
Returns styled string.
import * as style from "styled-terminal.js"; // ES6
type Preset = "rainbow" | "money";
let result;
result = style.preset("preset-name");
// OR
result = "Hello World!".preset("preset-name");
console.log(result); // prints the styled string.Clears a string from any styles.
Returns unstyled string.
import * as style from "styled-terminal.js"; // ES6
let styledString = "...";
let result;
result = styledString.clear();
// OR
result = "...".clearStyle();
console.log(result); // prints the styled string.Saves style as template within a given name.
import * as style from "styled-terminal.js"; // ES6
const styleObject = {...};
style.saveStyle('template', styleObject);
console.log("Hello World!".style("template")); // prints the styled string.Saves color as template within a given name.
import * as style from "styled-terminal.js"; // ES6
style.saveColor("warm-green", "#87AA31");
style.saveColor("black-bg", "hsl(0,100%,0%)");
const styleObject = {
color: "warm-green",
bg: "black-bg",
};
console.log("Hello World!".style(styleObject)); // prints the styled string.Saves template auto detection (COLOR|STYLE).
import * as style from "styled-terminal.js"; // ES6
style.save("style1", {...});
style.save("color", "#FFFFFF");Saves multiples styles|colors from js object.
import * as style from "styled-terminal.js"; // ES6
style.saveStyles({
'style1':{...},
'style2':{...},
'style3':{...},
...
});
style.saveColors({
'color1':'#FFFFFF',
'color2':'hsl(0,100%,50%)',
'color3':'rgb(255,0,0)',
'color4':'random semi-dark',
...
});Render style from file.
Use tags in order to style your text.
<! color="blue" weight="bold">Hello World!</!>
Custom style tag.
<! style_property="...">...Your text goes here...</!>
Style from template.
<@template_name>...Your text goes here...</template_name>
Style from preset.
<#preset_name>...Your text goes here...</preset_name>
Renders style of a txt file [Callback].
import * as style from "styled-terminal.js"; // ES6
style.render("src", (err, res) => {
if (err) throw err;
console.log(res);
});Renders style of a txt file [Callback].
import * as style from "styled-terminal.js"; // ES6
const result = style.render("src");
console.log(result);Renders style of a txt file [Promise].
import * as style from "styled-terminal.js"; // ES6
style
.render("src")
.then((result) => { console.log(result);})
.catch((err) => {...});To run the demo, first install the dependencies, then run npm demo:
$ npm install styled-terminal
$ npm run demo