renderkid
Advanced tools
Weekly downloads
Changelog
3.0.0
<12.x
Readme
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.
Install with npm:
$ npm install renderkid
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)
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)
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>
")
See margins above. Paddings work the same way, only inward.
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>")
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
.
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:
FAQs
Stylish console.log for node
The npm package renderkid receives a total of 11,409,246 weekly downloads. As such, renderkid popularity was classified as popular.
We found that renderkid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.