Big update!Announcing Socket for GitHub 1.0. Learn more
Socket
BlogLoveFAQ
Install
Log in

renderkid

Package Overview
Dependencies
5
Maintainers
1
Versions
26
Issues
File Explorer

Advanced tools

renderkid

Stylish console.log for node

    3.0.0latest

Version published
Maintainers
1
Weekly downloads
11,966,388
decreased by-4.12%

Weekly downloads

Changelog

Source

3.0.0

  • Breaking change: Dropped support for Node <12.x

Readme

Source

RenderKid

Build Status

RenderKid allows you to use HTML and CSS to style your CLI output, making it easy to create a beautiful, readable, and consistent look for your nodejs tool.

Installation

Install with npm:

$ npm install renderkid

Usage

RenderKid = require('renderkid') r = new RenderKid() r.style({ "ul": { display: "block" margin: "2 0 2" } "li": { display: "block" marginBottom: "1" } "key": { color: "grey" marginRight: "1" } "value": { color: "bright-white" } }) output = r.render(" <ul> <li> <key>Name:</key> <value>RenderKid</value> </li> <li> <key>Version:</key> <value>0.2</value> </li> <li> <key>Last Update:</key> <value>Jan 2015</value> </li> </ul> ") console.log(output)

screenshot of usage

Stylesheet properties

Display mode

Elements can have a display of either inline, block, or none:

r.style({ "div": { display: "block" } "span": { display: "inline" # default } "hidden": { display: "none" } }) output = r.render(" <div>This will fill one or more rows.</div> <span>These</span> <span>will</span> <span>be</span> in the same <span>line.</span> <hidden>This won't be displayed.</hidden> ") console.log(output)

screenshot of usage

Margin

Margins work just like they do in browsers:

r.style({ "li": { display: "block" marginTop: "1" marginRight: "2" marginBottom: "3" marginLeft: "4" # or the shorthand version: "margin": "1 2 3 4" }, "highlight": { display: "inline" marginLeft: "2" marginRight: "2" } }) r.render(" <ul> <li>Item <highlgiht>1</highlight></li> <li>Item <highlgiht>2</highlight></li> <li>Item <highlgiht>3</highlight></li> </ul> ")

Padding

See margins above. Paddings work the same way, only inward.

Width and Height

Block elements can have explicit width and height:

r.style({ "box": { display: "block" "width": "4" "height": "2" } }) r.render("<box>This is a box and some of its text will be truncated.</box>")

Colors

You can set a custom color and background color for each element:

r.style({ "error": { color: "black" background: "red" } })

List of colors currently supported are black, red, green, yellow, blue, magenta, cyan, white, grey, bright-red, bright-green, bright-yellow, bright-blue, bright-magenta, bright-cyan, bright-white.

Bullet points

Block elements can have bullet points on their margins. Let's start with an example:

r.style({ "li": { # To add bullet points to an element, first you # should make some room for the bullet point by # giving your element some margin to the left: marginLeft: "4", # Now we can add a bullet point to our margin: bullet: '"-"' } }) # The four hyphens are there for visual reference r.render(" ---- <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> ---- ")

And here is the result:

screenshot of bullet points, 1

FAQs

What is renderkid?

Stylish console.log for node

Is renderkid popular?

The npm package renderkid receives a total of 10,016,072 weekly downloads. As such, renderkid popularity was classified as popular.

Is renderkid well maintained?

We found that renderkid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 1 open source maintainer collaborating on the project.

Last updated on 23 Oct 2021
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc