# 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?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
* [`unified().use(rehypeFormat[, options])`](#unifieduserehypeformat-options)
* [`Options`](#options)
* [Examples](#examples)
* [Example: markdown input (remark)](#example-markdown-input-remark)
* [Example: tabs and blank lines (`indent`, `blanks`)](#example-tabs-and-blank-lines-indent-blanks)
* [Types](#types)
* [Compatibility](#compatibility)
* [Security](#security)
* [Related](#related)
* [Contribute](#contribute)
* [License](#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
Hello!
```
…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
Hello!
```
## API
This package exports no identifiers.
The default export is [`rehypeFormat`][api-rehype-format].
### `unified().use(rehypeFormat[, options])`
Format whitespace in HTML.
###### Parameters
* `options` ([`Options`][api-options], optional)
— configuration
###### Returns
Transform ([`Transformer`][transformer]).
### `Options`
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
### Example: markdown input (remark)
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
Neptune
Hello, Neptune!
```
### Example: tabs and blank lines (`indent`, `blanks`)
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 `