1.1.1 • Published 10 months ago
chalk-dom v1.1.1
Just like chalk but right in your browser. It uses HTMElement elements (b,s,i,span) and a little inline-css.
Features
- Expressive API
- Highly performant
- Ability to nest styles
- Customizable
- Doesn't extend
String.prototype
- Clean and focused
- Actively maintained
Install
$ npm install chalk-dom
Usage
HTML
<div id='console'></div>
JavaScript
import chalk from 'chalk-dom';
const consoleBox = document.getElementById('console');
function log(...data) {
consoleBox.innerHTML += `<div>${data.join(' ')}</div>`;
}
log(chalk.blue('Hello World!'));
Demo
To run the demo, clone this repo and simply open the index.html file in your browser.
API
The one difference with inken is styles can be chained with chalk-dom.
import chalk from 'chalk-dom';
...
log(chalk.bgBlack.yellow.italic('Hello, World!'));
Styles
Modifiers
bold
- Make the text bold.dim
- Make the text have lower opacity (sets css opacity to0.5
).italic
- Make the text italic.underline
- Underline the text.strikethrough
- Put a horizontal line through the center of the text.inverse
- Invert the background and foreground colors.
User defined
fg
- Set a custom foreground color (text color)bg
- Set a custom background color
Colors
black
red
green
yellow
blue
magenta
cyan
white
gray
Background colors
bgBlack
bgRed
bgGreen
bgYellow
bgBlue
bgMagenta
bgCyan
bgWhite
bgGray
Related
LICENSE
Released under the MIT License