Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    renderkidpublic

    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')
     
    = 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

    Keywords

    none

    install

    npm i renderkid

    Downloadsweekly downloads

    1,310,389

    version

    2.0.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar