Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/henryhale/chalk-dom
🖍 Chalk for the browser
https://github.com/henryhale/chalk-dom
browser chalk colors css dev henryhale html javascript readline terminal terminal-colors
Last synced: 3 days ago
JSON representation
🖍 Chalk for the browser
- Host: GitHub
- URL: https://github.com/henryhale/chalk-dom
- Owner: henryhale
- License: mit
- Created: 2023-02-23T10:01:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-30T10:28:53.000Z (14 days ago)
- Last Synced: 2024-11-09T22:14:43.174Z (4 days ago)
- Topics: browser, chalk, colors, css, dev, henryhale, html, javascript, readline, terminal, terminal-colors
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Chalk-dom
chalk for the browser
> Just like [chalk](https://github.com/chalk/chalk) but right in your browser. It uses HTML 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
- Maintained
## Install
```console
$ npm install chalk-dom
```
## Usage
### HTML
```html
```
### JavaScript
```js
import chalk from 'chalk-dom';
const consoleBox = document.getElementById('console');
function log(...data) {
consoleBox.innerHTML += `
${data.join(' ')}`;
}
log(chalk.blue('Hello World!'));
```
## Demo
To run the [demo](https://github.com/henryhale/chalk-dom/blob/master/demo), clone this repo and simply open the [index.html](https://github.com/henryhale/chalk-dom/blob/master/demo/index.html) file in your browser.
## API
The one difference with [inken](https://github.com/henryhale/inken) is styles can be chained with [chalk-dom](https://github.com/henryhale/chalk-dom).
```js
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 to `0.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
- [Inken](https://github.com/henryhale/inken) - terminal-like string styling for the browser
- [xterminal](https://github.com/henryhale/xterminal) - build web-based cli interfaces
## LICENSE
Released under the [MIT License](https://github.com/henryhale/chalk-dom/blob/master/LICENSE)