rehype-stringify
Advanced tools
rehype-stringify is a plugin for the rehype ecosystem that compiles a syntax tree into HTML. It is typically used in conjunction with other rehype plugins to process and transform HTML content.
Basic HTML Stringification
This feature allows you to convert an HTML string into a syntax tree and then back into an HTML string. It demonstrates the basic usage of rehype-stringify in a unified pipeline.
const unified = require('unified');
const rehypeParse = require('rehype-parse');
const rehypeStringify = require('rehype-stringify');
const html = '<h1>Hello, world!</h1>';
unified()
.use(rehypeParse)
.use(rehypeStringify)
.process(html)
.then((file) => {
console.log(String(file));
});Transforming HTML
This feature demonstrates how you can transform HTML content by modifying the syntax tree before stringifying it back to HTML. In this example, the text inside the <h1> tag is changed from 'Hello, world!' to 'Hello, universe!'.
const unified = require('unified');
const rehypeParse = require('rehype-parse');
const rehypeStringify = require('rehype-stringify');
const rehype = require('rehype');
const html = '<h1>Hello, world!</h1>';
unified()
.use(rehypeParse)
.use(() => (tree) => {
tree.children[0].children[0].value = 'Hello, universe!';
})
.use(rehypeStringify)
.process(html)
.then((file) => {
console.log(String(file));
});htmlparser2 is a fast and forgiving HTML/XML parser. It can be used to parse HTML into a DOM-like structure, which can then be manipulated and serialized back to HTML. Unlike rehype-stringify, htmlparser2 is more focused on parsing and does not provide a unified pipeline for transformations.
jsdom is a JavaScript implementation of the DOM and HTML standards. It allows you to create and manipulate a DOM tree in a Node.js environment. While jsdom provides a more complete DOM API, it is heavier and more complex compared to rehype-stringify, which is more lightweight and focused on HTML stringification.
cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It parses HTML and XML and provides a jQuery-like API for manipulating the resulting DOM. Cheerio is similar to rehype-stringify in that it allows for HTML manipulation, but it uses a different API and is more focused on jQuery-like operations.
rehype plugin to add support for serializing HTML.
This package is a unified (rehype) plugin that defines how to take a syntax tree as input and turn it into serialized HTML. When it’s used, HTML is serialized as the final result.
See the monorepo readme for info on what the rehype ecosystem is.
This plugin adds support to unified for serializing HTML.
You can alternatively use rehype instead, which combines
unified, rehype-parse, and this plugin.
When you’re in a browser, trust your content, don’t need formatting options, and
value a smaller bundle size, you can use
rehype-dom-stringify instead.
This plugin is built on hast-util-to-html, which turns
hast syntax trees into a string.
rehype focusses on making it easier to transform content by abstracting such
internals away.
A different plugin, rehype-format, improves the readability
of HTML source code as it adds insignificant but pretty whitespace between
elements.
There is also the preset rehype-minify for when you want the
inverse: minified and mangled HTML.
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install rehype-stringify
In Deno with esm.sh:
import rehypeStringify from 'https://esm.sh/rehype-stringify@9'
In browsers with esm.sh:
<script type="module">
import rehypeStringify from 'https://esm.sh/rehype-stringify@9?bundle'
</script>
Say we have the following module example.js:
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeStringify)
.process('# Hi\n\n*Hello*, world!')
console.log(String(file))
}
…running that with node example.js yields:
<h1>Hi</h1>
<p><em>Hello</em>, world!</p>
This package exports no identifiers.
The default export is rehypeStringify.
unified().use(rehypeStringify[, options])Add support for serializing HTML.
Options are passed to hast-util-to-html.
optionsConfiguration (optional).
options.entitiesDefine how to create character references (Object, default: {}).
Configuration is passed to stringify-entities.
You can use the fields useNamedReferences, useShortestReferences, and
omitOptionalSemicolons.
You cannot use the fields escapeOnly, attribute, or subset).
options.upperDoctypeUse a <!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: get class instead of class="" (boolean,
default: false).
Not used in the SVG space.
👉 Note: boolean attributes (such as
hidden) are always collapsed.
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: trueorcloseEmptyElements: 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 whitespace, if possible: get
class="a b"title="c d" instead of class="a b" title="c d" to save bytes
(boolean, default: false).
Not used in the SVG space.
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
options.tightDoctypeDrop unneeded spaces in doctypes: <!doctypehtml> instead of <!doctype html>
to save bytes (boolean, default: false).
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
options.bogusCommentsUse “bogus comments” instead of comments to save byes: <?charlie> instead of
<!--charlie--> (boolean, default: false).
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
options.allowParseErrorsDo not encode characters which cause parse errors (even though they work), to
save bytes (boolean, default: false).
Not used in the SVG space.
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
options.allowDangerousCharactersDo not encode some characters which cause XSS vulnerabilities in older browsers
(boolean, default: false).
⚠️ Danger: 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).
⚠️ Danger: only set this if you completely trust the content.
options.spaceWhich space the document is in ('svg' or 'html', default: 'html').
When an <svg> element is found in the HTML space, rehype-stringify already
automatically switches to and from the SVG space when entering and exiting it.
👉 Note: rehype is not an XML parser. It supports SVG as embedded in HTML. It does not support the features available in XML. Passing SVG files might break but fragments of modern SVG should be fine.
options.voidsTag names of elements to serialize without closing tag (Array<string>,
default: html-void-elements).
Not used in the SVG space.
👉 Note: It’s highly unlikely that you want to pass this. It’s only really applicable to the
hast-util-to-htmlutility.
HTML is serialized according to WHATWG HTML (the living standard), which is also followed by browsers such as Chrome and Firefox.
The syntax tree format used in rehype is hast.
This package is fully typed with TypeScript.
The extra types Options are exported.
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.
As rehype works on HTML, and improper use of HTML can open you up to a
cross-site scripting (XSS) attack, use of rehype can also be unsafe.
Use rehype-sanitize to make the tree safe.
Use of rehype plugins could also open you up to other attacks. Carefully assess each plugin and the risks involved in using them.
For info on how to submit a report, see our security policy.
See contributing.md in rehypejs/.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, organization, or community you agree to abide by its terms.
Support this effort and give back by sponsoring on OpenCollective!
Vercel
|
Motif
|
HashiCorp
|
GitBook
|
Gatsby
| ||||
Netlify
|
Coinbase
|
ThemeIsle
|
Expo
|
Boost Note
|
Markdown Space
|
Holloway
| ||
|
You? |
FAQs
rehype plugin to serialize HTML
The npm package rehype-stringify receives a total of 767,264 weekly downloads. As such, rehype-stringify popularity was classified as popular.
We found that rehype-stringify demonstrated a not healthy version release cadence and project activity because the last version was released 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.
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.