hast-util-to-html
Advanced tools
The hast-util-to-html package is a utility for converting HAST (Hypertext Abstract Syntax Tree) syntax trees to HTML strings. This is particularly useful in the context of unified.js ecosystem for processing HTML content, enabling developers to easily transform markdown or other formats into HTML after processing them through various plugins.
Convert HAST to HTML
This feature allows you to convert a HAST tree to an HTML string. The code sample demonstrates converting a simple paragraph element with text content into its HTML string representation.
const toHtml = require('hast-util-to-html');
const hast = {
type: 'element',
tagName: 'p',
properties: {},
children: [{type: 'text', value: 'Hello, world!'}]
};
console.log(toHtml(hast));Part of the rehype ecosystem, which is built on top of unified, rehype-stringify converts HAST to HTML. It is similar to hast-util-to-html but is typically used as a rehype plugin, offering a more integrated experience within the rehype ecosystem.
While not directly converting HAST to HTML, remark-html is a plugin for remark (a markdown processor) that allows markdown to be converted to HTML. It serves a similar end goal of transforming content into HTML, but it starts with markdown instead of HAST.
hast utility to transform to HTML.
npm:
npm install hast-util-to-html
var h = require('hastscript')
var toHtml = require('hast-util-to-html')
var tree = h('.alpha', [
'bravo ',
h('b', 'charlie'),
' delta ',
h('a.echo', {download: true}, 'foxtrot')
])
console.log(toHtml(tree))
Yields:
<div class="alpha">bravo <b>charlie</b> delta <a class="echo" download>foxtrot</a></div>
toHtml(tree[, options])Stringify the given hast tree.
options.spaceWhether the root of the tree is in the 'html' or 'svg'
space (enum, 'svg' or 'html', default: 'html').
If an svg element is found in the HTML space, toHtml automatically switches
to the SVG space when entering the element, and switches back when exiting.
options.entitiesConfiguration for stringify-entities (Object, default:
{}).
Do not use escapeOnly, attribute, or subset (toHtml already passes
those, so they won’t work).
However, useNamedReferences, useShortestReferences, and
omitOptionalSemicolons are all fine.
options.voidsTag names of elements to stringify without closing tag
(Array.<string>, default: html-void-elements).
Not used in the SVG space.
options.upperDoctypeUse an <!DOCTYPE… instead of <!doctype….
Useless except for XHTML (boolean, default: false).
options.quotePreferred quote to use ('"' or '\'', default: '"').
options.quoteSmartUse the other quote if that results in less bytes (boolean, default: false).
options.preferUnquotedLeave attributes unquoted if that results in less bytes (boolean, default:
false).
Not used in the SVG space.
options.omitOptionalTagsOmit optional opening and closing tags (boolean, default: false).
For example, in <ol><li>one</li><li>two</li></ol>, both </li>
closing tags can be omitted.
The first because it’s followed by another li, the last because it’s followed
by nothing.
Not used in the SVG space.
options.collapseEmptyAttributesCollapse empty attributes: class="" is stringified as class instead
(boolean, default: false).
Note: boolean attributes, such as hidden, are always collapsed.
Not used in the SVG space.
options.closeSelfClosingClose self-closing nodes with an extra slash (/): <img /> instead of
<img> (boolean, default: false).
See tightSelfClosing to control whether a space is used before the slash.
Not used in the SVG space.
options.closeEmptyElementsClose SVG elements without any content with slash (/) on the opening tag
instead of an end tag: <circle /> instead of <circle></circle> (boolean,
default: false).
See tightSelfClosing to control whether a space is used before the slash.
Not used in the HTML space.
options.tightSelfClosingDo not use an extra space when closing self-closing elements: <img/> instead
of <img /> (boolean, default: false).
Note: Only used if closeSelfClosing: true or closeEmptyElements: true.
options.tightCommaSeparatedListsJoin known comma-separated attribute values with just a comma (,), instead of
padding them on the right as well (,·, where · represents a space)
(boolean, default: false).
options.tightAttributesJoin attributes together, without white-space, if possible: class="a b" title="c d" is stringified as class="a b"title="c d" instead to save bytes
(boolean, default: false).
Note: creates invalid (but working) markup.
Not used in the SVG space.
options.tightDoctypeDrop unneeded spaces in doctypes: <!doctypehtml> instead of <!doctype html>
to save bytes (boolean, default: false).
Note: creates invalid (but working) markup.
options.allowParseErrorsDo not encode characters which cause parse errors (even though they work), to
save bytes (boolean, default: false).
Note: creates invalid (but working) markup.
Not used in the SVG space.
options.allowDangerousCharactersDo not encode some characters which cause XSS vulnerabilities in older browsers
(boolean, default: false).
Note: Only set this if you completely trust the content.
options.allowDangerousHTMLAllow raw nodes and insert them as raw HTML.
When falsey, encodes raw nodes (boolean, default: false).
Note: Only set this if you completely trust the content.
Use of hast-util-to-html can open you up to a
cross-site scripting (XSS) attack if the hast tree is unsafe.
Use hast-util-santize to make the hast tree safe.
hast-util-sanitize
— Sanitize hast nodesrehype-stringify
— Wrapper around this project for rehypeSee contributing.md in syntax-tree/.github for ways to get
started.
See support.md for ways to get help.
This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.
FAQs
hast utility to serialize to HTML
The npm package hast-util-to-html receives a total of 1,415,537 weekly downloads. As such, hast-util-to-html popularity was classified as popular.
We found that hast-util-to-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.