hast-util-to-html

What is hast-util-to-html?

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.

What are hast-util-to-html's main functionalities?

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));

Other packages similar to hast-util-to-html

rehype-stringify

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.

remark-html

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.

README

hast-util-to-html

Transform HAST to HTML.

Installation

npm:

npm install hast-util-to-html

Usage

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>

API

toHTML(node[, options])

Stringify the given HAST node.

options.entities

Configuration for stringify-entities (Object, default: {}). Do not use escapeOnly, attribute, or subset (toHTML already passes those). However, useNamedReferences, useShortestReferences, and omitOptionalSemicolons are all fine.

options.voids

Tag-names of elements to stringify without closing tag (Array.<string>, default: html-void-elements).

options.quote

Preferred quote to use ('"' or '\'', default: '"').

options.quoteSmart

Use the other quote if that results in less bytes (boolean, default: false).

options.preferUnquoted

Leave attributes unquoted if that results in less bytes (boolean, default: false).

options.omitOptionalTags

Omit 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.

options.collapseEmptyAttributes

Collapse empty attributes: class="" is stringified as class instead (boolean, default: false). Note: boolean attributes, such as hidden, are always collapsed.

options.closeSelfClosing

Close self-closing nodes with an extra slash (/): <img /> instead of <img> (boolean, default: false).

options.tightSelfClosing

Do not use an extra space when closing self-closing elements: <img/> instead of <img /> (boolean, default: false). Note: Only used if closeSelfClosing: true.

options.tightCommaSeparatedLists

Join known comma-separated attribute values with just a comma (,), instead of padding them on the right as well (,) (boolean, default: false).

options.tightAttributes

Join 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.

options.allowParseErrors

Do not encode characters which trigger parse errors (even though they work), to save bytes (boolean, default: false). Note: creates invalid (but working) markup.

options.allowDangerousCharacters

Do 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.allowDangerousHTML

Allow 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.

Related

• hast-util-sanitize — Sanitize HAST nodes
• rehype-stringify — Wrapper around this project for rehype

License

MIT © Titus Wormer