rehype-format

[![Build][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][downloads]
[![Size][size-badge]][size]
[![Sponsors][sponsors-badge]][collective]
[![Backers][backers-badge]][collective]
[![Chat][chat-badge]][chat]

[rehype][] plugin to format HTML.

Contents

* What is this?
* When should I use this?
* Install
* Use
* API
* [unified().use(rehypeFormat[, options])](#unifieduserehypeformat-options)
* Options
* Examples
* Example: markdown input (remark)
* Example: tabs and blank lines (indent, blanks)
* Types
* Compatibility
* Security
* Related
* Contribute
* License

What is this?

This package is a [unified][] ([rehype][]) plugin to format whitespace in HTML.
In short, it works as follows:

* collapse all existing whitespace to either a line ending or a single space
* remove those spaces and line endings if they do not contribute to the
document
* inject needed line endings
* indent previously collapsed line endings properly

unified is a project that transforms content with abstract syntax trees
(ASTs).
rehype adds support for HTML to unified.
hast is the HTML AST that rehype uses.
This is a rehype plugin that changes whitespace in hast.

When should I use this?

This package is useful when you want to improve the readability of HTML source
code as it adds insignificant but pretty whitespace between elements.
The package [hast-util-format][hast-util-format] does the same as this plugin
at the utility level.
A different plugin, [rehype-stringify][rehype-stringify], controls how HTML
is actually printed: which quotes to use, whether to put a / on ,
etc.
Yet another project, [rehype-minify][rehype-minify], does the inverse: improve
the size of HTML source code by making it hard to read.

Install

This package is [ESM only][esm].
In Node.js (version 16+), install with [npm][]:

``sh
npm install rehype-format
`

In Deno with [esm.sh][esmsh]:

`js
import rehypeFormat from 'https://esm.sh/rehype-format@5'
`

In browsers with [esm.sh][esmsh]:

`html

`

Use

Say we have the following file index.html:

`html







hi there




`

…and our module example.js looks as follows:

`js
import rehypeFormat from 'rehype-format'
import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'

const file = await read('index.html')

await unified()
.use(rehypeParse)
.use(rehypeFormat)
.use(rehypeStringify)
.process(file)

console.log(String(file))
`

…then running node example.js yields:

`html









hi there




`

API

This package exports no identifiers.
The default export is [rehypeFormat][api-rehype-format].

$3

Format whitespace in HTML.

###### Parameters

* options ([Options][api-options], optional)
— configuration

###### Returns

Transform ([Transformer][transformer]).

$3

Configuration (TypeScript type).

###### Fields

* blanks (Array, default: [])
— list of tag names to join with a blank line (default: []); these tags,
when next to each other, are joined by a blank line (\n\n); for example,
when ['head', 'body'] is given, a blank line is added between these two
* indent (number, string, default: 2)
— indentation per level (default: 2); when number, uses that amount of
spaces; when string, uses that per indentation level
* indentInitial (boolean, default: true)
— whether to indent the first level (default: true); this is usually the
, thus not indenting head and body

Examples

$3

The following example shows how remark and rehype can be combined to turn
markdown into HTML, using this plugin to pretty print the HTML:

`js
import rehypeDocument from 'rehype-document'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {unified} from 'unified'

const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeDocument, {title: 'Neptune'})
.use(rehypeFormat)
.use(rehypeStringify)
.process('# Hello, Neptune!')

console.log(String(file))
`

Yields:

`html










Hello, Neptune!




`

$3

The following example shows how this plugin can format with tabs instead of
spaces by passing the indent option and how blank lines can be added between
certain elements:

`js
import rehypeFormat from 'rehype-format'
import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'

const file = await unified()
.use(rehypeParse)
.use(rehypeFormat, {blanks: ['body', 'head'], indent: '\t'})
.use(rehypeStringify)
.process('

Hi!

Hello, Venus!

')

console.log(String(file))
`

Yields:

`html






Hi!

Hello, Venus!

`

> 👉 Note: the added tags (html, head, and body) do not come from this
> plugin.
> They’re instead added by rehype-parse, which in document mode (default),
> adds them according to the HTML spec.

Types

This package is fully typed with [TypeScript][].
It exports the additional type [Options][api-options].

Compatibility

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-format@5,
compatible with Node.js 16.

This plugin works with rehype-parse version 3+, rehype-stringify version 3+,
rehype version 5+, and unified version 6+.

Security

Use of rehype-format changes whitespace in the tree.
Whitespace in