Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tiza

demo

test demo npm gzip size

Tiza is a JavaScript library for browsers' console styling.

View demo here: https://tiza.js.org

Installation

NPM

npm install --save tiza

Then import it:

import tiza from 'tiza'
// or via require if you are using commonjs
const tiza = require('tiza').default

UMD bundle

Add script tag to your HTML file:

<script src="https://unpkg.com/tiza/dist/tiza.min.js"></script>

Usage

import tiza from 'tiza'

tiza
  .color('#fff') // Set color, all CSS colors are supported
  .bgColor('purple') // Set background color
  .bold() // Set bold font
  .italic() // Set italic font
  .size(20) // Set font size

  // Support custom styles too!
  .style(`padding: 4px; border-radius: 2px;`)

  // After styles done right, it's time to add text now
  .text('Hey, I have styling now!')

  .space(8) // Add spaces
  .text('Hey, I am far away from previous one')

  .newline(2) // Add newline

  .reset() // Reset all styles set before

  .text('I lost my styles, because `reset` is called')

  .log() // log all texts above to console

Always remember to call log method at last.

Styles reusing

To reuse styles, just make them nested like this:

const error = tiza.color('red').text
const info = tiza.bold().bgColor('yellow').text

tiza.log(
  error('I am some error'),
  'I am some normal message',
  error('I am some error again!'),
  info('I am some info', error('I am still some error!'))
)

Notice that inside texts will not extend outside texts' styles.

For more detail see API

How does it work?

Styling console output with CSS

Who's using Tiza

Console Importer

API

Method Description
tiza.color('#f00') Set font color, support all CSS colors
tiza.bgColor('#f00') Set background color, support all CSS colors
tiza.bold() Set font weight to bold
tiza.italic() Set font style to italic
tiza.size(14) Set font size, number will be converted to px
tiza.style('color:#f00') Set custom style, using inline style format
tiza.reset() Reset styles set before
tiza.text(...args: string[]) Add text(s), support multiple arguments. Every text added here will be styled with styles set previously. Notice that every argument will be converted to string, and there will be no space between them(This behaviour is different with console.log). If you want to add a space, use text('a').space().text('b')
tiza.space(count?: number) Add space. The default count is 1
tiza.newline(count?: number) Add newline. The default count is 1
tiza.log() Log all texts to console with console.log. Always remember to call log at last. Arguments are also supported, log(...args) equals to text(...args).log()
tiza.info() The same as tiza.log, but output with console.info
tiza.warn() The same as tiza.log, but output with console.warn
tiza.error() The same as tiza.log, but output with console.error

License

MIT