https://github.com/morevm/console-css
Style browser console messages with CSS
https://github.com/morevm/console-css
console css devtools
Last synced: 4 months ago
JSON representation
Style browser console messages with CSS
- Host: GitHub
- URL: https://github.com/morevm/console-css
- Owner: MorevM
- License: mit
- Created: 2022-10-09T15:20:28.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-26T15:50:49.000Z (almost 4 years ago)
- Last Synced: 2025-07-30T18:38:08.431Z (about 1 year ago)
- Topics: console, css, devtools
- Language: TypeScript
- Homepage:
- Size: 364 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @morev/console-css
The library to style browser console messages.
[](https://opensource.org/licenses/MIT)
## Why?
`¯\_(ツ)_/¯`
Sometimes you may want to warn users of your site like Facebook does:
Perhaps you want to make a prominent message to the developers like BBC does:
Maybe you want to enchance some of your custom dev utilities, etc.
**BUT**
If you want to print BBC News logotype in the console, you need to write smth like that:
```js
console.log('%cB%c %cB%c %cB%c %cNEWS %c', 'font-style:bold;font-size:40px;padding:4px 16px;background:#000;color:#fff;', 'background:none', 'font-style:bold;font-size:40px;padding:4px 16px;background:#000;color:#fff;', 'background:none', 'font-style:bold;font-size:40px;padding:4px 16px;background:#000;color:#fff;', 'background:none', 'font-style:bold;font-size:40px;padding:4px 16px;background:#b80000;color:#fff;', 'background:none');
```
Copy-paste into you browser console and press `Enter` to see the result. \
The code doesn't look friendly, huh?
**But there is another way:**
```js
import ConsoleCSS from '@morev/console-css';
ConsoleCSS.add(`
.letter {
font-style: bold;
font-size: 40px;
padding: 4px 16px;
background: #000000;
color: #ffffff;
}
.bg-red {
background: #ff0000;
}
`);
ConsoleCSS.styled.log(`
B
B
C
News
`)
```
---
## Installation
### Using `yarn`
```bash
yarn add @morev/console-css
```
### Using `npm`
```bash
npm install @morev/console-css
```
### Using `pnpm`
```bash
pnpm add @morev/console-css
```
## Usage
The package exports the ConsoleCSS class instance that considered singleton. \
If used directly in HTML without any bundler - it's available via `window.ConsoleCSS`.
> **Important:** The package only works in browser. It doesn't fall but does nothing on server side.
### Default styles
By default, the package styles only well-known HTML tags:
* `` - **bold** text
* `` - *italic* text
* `` - _underlined_ text
* `` - ~~strikethrough~~ text
### Inline style
You may use inline styles:
```js
import ConsoleCSS from '@morev/console-css';
ConsoleCSS.styled.log(`Red bold text`);
```
### Adding custom CSS tokens
The core class has a method `.add(rules: string)` that accepts a CSS-like string with needed tokens. \
You can use `.add()` method multiple times.
> This input string isn't validated, so make sure your CSS syntax is correct.
```ts
import ConsoleCSS from '@morev/console-css';
ConsoleCSS.add(`
.block { color: red; text-decoration: underline; }
`);
ConsoleCSS.styled.log('Red underlined text');
```
### Override the default `window.console` object
That might be annoying to remember about custom styled messages class, so the library provides a way to replace global `window.console`
```ts
import ConsoleCSS from '@morev/console-css';
// No matters before or after `.override()` call
ConsoleCSS.add(`
.block { color: red; text-decoration: underline; }
`);
ConsoleCSS.override();
console.log('Wow, a styled message using native `console.log`!');
// Restore the original `window.console`
ConsoleCSS.restore();
console.log('No longer styled messages :(');
```