Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
RenderKid is a powerful HTML rendering engine designed for Node.js. It allows developers to create and manipulate HTML content programmatically with ease. The package is particularly useful for generating HTML for emails, reports, or any other content that needs to be dynamically created and styled.
HTML Rendering
RenderKid allows you to render HTML content. In this example, a simple HTML string is rendered and logged to the console.
const RenderKid = require('renderkid');
const kid = new RenderKid();
const html = kid.render('<div>Hello, <b>world</b>!</div>');
console.log(html);
CSS Styling
RenderKid supports CSS styling. In this example, the <b> tag is styled to have red text color.
const RenderKid = require('renderkid');
const kid = new RenderKid();
kid.style({
'b': {
'color': 'red'
}
});
const html = kid.render('<div>Hello, <b>world</b>!</div>');
console.log(html);
Custom Tags
RenderKid allows you to define custom tags. In this example, a custom tag <custom> is defined and rendered as a <span> with a class of 'custom'.
const RenderKid = require('renderkid');
const kid = new RenderKid();
kid.addTag('custom', {
render: function (node) {
return `<span class='custom'>${node.innerHTML}</span>`;
}
});
const html = kid.render('<div>Hello, <custom>world</custom>!</div>');
console.log(html);
Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It allows you to parse and manipulate HTML and XML with a jQuery-like syntax. Unlike RenderKid, Cheerio focuses more on DOM manipulation rather than rendering and styling.
jsdom is a JavaScript implementation of the WHATWG DOM and HTML standards, primarily intended for use with Node.js. It allows you to create and manipulate a DOM tree, similar to how you would in a browser. While RenderKid is focused on rendering and styling HTML, jsdom provides a more comprehensive simulation of a web browser environment.
htmlparser2 is a fast and forgiving HTML/XML parser. It is designed to be used in Node.js and provides a way to parse and traverse HTML documents. Unlike RenderKid, htmlparser2 does not provide rendering or styling capabilities but is excellent for parsing and manipulating HTML.
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 9,072,250 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 for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.