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 to 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.
If you also need to parse HTML, you can alternatively use
rehype, which combines unified,
rehype-parse, and this plugin.
When you are in a browser, trust your content, don’t need formatting options,
and value a smaller bundle size, you can use
rehype-dom-stringify instead.
If you don’t use plugins and have access to a syntax tree, you can directly use
hast-util-to-html, which is used inside this plugin.
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 16+), install with npm:
npm install rehype-stringify
In Deno with esm.sh:
import rehypeStringify from 'https://esm.sh/rehype-stringify@10'
In browsers with esm.sh:
<script type="module">
import rehypeStringify from 'https://esm.sh/rehype-stringify@10?bundle'
</script>
Say we have the following module example.js:
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import {unified} from 'unified'
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])Plugin to add support for serializing to HTML.
options (Options, optional)
— configurationNothing (undefined).
CharacterReferencesHow to serialize character references (TypeScript type).
⚠️ Note:
omitOptionalSemicolonscreates what HTML calls “parse errors” but is otherwise still valid HTML — don’t use this except when building a minifier. Omitting semicolons is possible for certain named and numeric references in some cases.
⚠️ Note:
useNamedReferencescan be omitted when usinguseShortestReferences.
useNamedReferences (boolean, default: false)
— prefer named character references (&) where possibleomitOptionalSemicolons (boolean, default: false)
— whether to omit semicolons when possibleuseShortestReferences (boolean, default: false)
— prefer the shortest possible reference, if that results in less bytesOptionsConfiguration (TypeScript type).
⚠️ Danger: only set
allowDangerousCharactersandallowDangerousHtmlif you completely trust the content.
👉 Note:
allowParseErrors,bogusComments,tightAttributes, andtightDoctypeintentionally create parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
👉 Note: this is not an XML serializer. It supports SVG as embedded in HTML. It does not support the features available in XML. Use
xast-util-to-xmlto serialize XML.
allowDangerousCharacters (boolean, default: false)
— do not encode some characters which cause XSS vulnerabilities in older
browsersallowDangerousHtml (boolean, default: false)
— allow Raw nodes and insert them as raw HTML; when false, Raw
nodes are encodedallowParseErrors (boolean, default: false)
— do not encode characters which cause parse errors (even though they
work), to save bytes; not used in the SVG space.bogusComments (boolean, default: false)
— use “bogus comments” instead of comments to save byes: <?charlie>
instead of <!--charlie-->characterReferences (CharacterReferences,
optional)
— configure how to serialize character referencescloseEmptyElements (boolean, default: false)
— close SVG elements without any content with slash (/) on the opening
tag instead of an end tag: <circle /> instead of <circle></circle>;
see tightSelfClosing to control whether a space is used before the slash;
not used in the HTML spacecloseSelfClosing (boolean, default: false)
— close self-closing nodes with an extra slash (/): <img /> instead of
<img>; see tightSelfClosing to control whether a space is used before
the slash; not used in the SVG space.collapseEmptyAttributes (boolean, default: false)
— collapse empty attributes: get class instead of class=""; not used in
the SVG space; boolean attributes (such as hidden) are always collapsedomitOptionalTags (boolean, default: false)
— omit optional opening and closing tags; to illustrate, 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 spacepreferUnquoted (boolean, default: false)
— leave attributes unquoted if that results in less bytes; not used in the
SVG spacequote ('"' or "'", default: '"')
— preferred quote to usequoteSmart (boolean, default: false)
— use the other quote if that results in less bytesspace ('html' or 'svg', default: 'html')
— which space the document is in; when an <svg> element is found in the
HTML space, this package already automatically switches to and from the SVGtightAttributes (boolean, default: false)
— join attributes together, without whitespace, if possible: get
class="a b"title="c d" instead of class="a b" title="c d" to save
bytes; not used in the SVG spacetightCommaSeparatedLists (boolean, default: false)
— join known comma-separated attribute values with just a comma (,),
instead of padding them on the right as well (,␠, where ␠ represents a
space)tightDoctype (boolean, default: false)
— drop unneeded spaces in doctypes: <!doctypehtml> instead of
<!doctype html> to save bytestightSelfClosing (boolean, default: false).
— do not use an extra space when closing self-closing elements: <img/>
instead of <img />; only used if closeSelfClosing: true or
closeEmptyElements: trueupperDoctype (boolean, default: false).
— use a <!DOCTYPE… instead of <!doctype…; useless except for XHTMLvoids (Array<string>, default:
html-void-elements)
— tag names of elements to serialize without closing tag; not used in the
SVG spaceHTML is serialized according to WHATWG HTML (the living standard), which is also followed by all browsers.
The syntax tree format used in rehype is hast.
This package is fully typed with TypeScript.
It exports the additional types
CharacterReferences and
Options.
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, rehype-stringify@^10,
compatible with Node.js 16.
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 627,946 weekly downloads. As such, rehype-stringify popularity was classified as popular.
We found that rehype-stringify demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.