Using plugins
You can use plugins and presets to extend unified by calling use on a processor.
A small example is:
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 {read} from 'to-vfile'
import {unified} from 'unified'
const file = await read('example.md')
await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeDocument, {title: '👋🌍'})
.use(rehypeFormat)
.use(rehypeStringify)
.process(file)
console.log(String(file))
(alias) function rehypeDocument(options?: Readonly<Options> | null | undefined): (tree: Root, file: VFile) => Root
import rehypeDocumentWrap a fragment in a document.
- @param options Configuration (optional).
- @returns Transform.
(alias) function rehypeFormat(options?: Options | null | undefined): (tree: Root) => undefined
import rehypeFormatFormat whitespace in HTML.
- @param options Configuration (optional).
- @returns Transform.
(alias) const rehypeStringify: Plugin<[(Options | null | undefined)?], Root, string>
import rehypeStringifyPlugin to add support for serializing as HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(alias) const remarkParse: Plugin<[(Readonly<Options> | null | undefined)?], string, Root>
import remarkParseAdd support for parsing from markdown.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(alias) function remarkRehype(processor: Processor, options?: Readonly<Options> | null | undefined): TransformBridge (+2 overloads)
import remarkRehypeTurn markdown into HTML.
Notes
Signature
- if a processor is given, runs the (rehype) plugins used on it with a hast tree, then discards the result (bridge mode)
- otherwise, returns a hast tree, the plugins used after
remarkRehypeare rehype plugins (mutate mode)
👉 Note: It’s highly unlikely that you want to pass a
processor.
HTML
Raw HTML is available in mdast as html nodes and can be embedded in hast as semistandard raw nodes. Most plugins ignore raw nodes but two notable ones don’t:
rehype-stringifyalso has an optionallowDangerousHtmlwhich will output the raw HTML. This is typically discouraged as noted by the option name but is useful if you completely trust authorsrehype-rawcan handle the raw embedded HTML strings by parsing them into standard hast nodes (element,text, etc); this is a heavy task as it needs a full HTML parser, but it is the only way to support untrusted content
Footnotes
Many options supported here relate to footnotes. Footnotes are not specified by CommonMark, which we follow by default. They are supported by GitHub, so footnotes can be enabled in markdown with remark-gfm.
The options footnoteBackLabel and footnoteLabel define natural language that explains footnotes, which is hidden for sighted users but shown to assistive technology. When your page is not in English, you must define translated values.
Back references use ARIA attributes, but the section label itself uses a heading that is hidden with an sr-only class. To show it to sighted users, define different attributes in footnoteLabelProperties.
Clobbering
Footnotes introduces a problem, as it links footnote calls to footnote definitions on the page through id attributes generated from user content, which results in DOM clobbering.
DOM clobbering is this:
<p id=x></p>
<script>alert(x) // `x` now refers to the DOM `p#x` element</script>
Elements by their ID are made available by browsers on the window object, which is a security risk. Using a prefix solves this problem.
More information on how to handle clobbering and the prefix is explained in Example: headings (DOM clobbering) in rehype-sanitize.
Unknown nodes
Unknown nodes are nodes with a type that isn’t in handlers or passThrough. The default behavior for unknown nodes is:
- when the node has a
value(and doesn’t havedata.hName,data.hProperties, ordata.hChildren, see later), create a hasttextnode - otherwise, create a
<div>element (which could be changed withdata.hName), with its children mapped from mdast to hast as well
This behavior can be changed by passing an unknownHandler.
- @overload
- @overload
- @overload
- @param destination Processor or configuration (optional).
- @param options When a processor was given, configuration (optional).
- @returns Transform.
(alias) function read(description: Compatible, options: BufferEncoding | ReadOptions | null | undefined, callback: Callback): undefined (+2 overloads)
import read(alias) const unified: Processor<undefined, undefined, undefined, undefined, undefined>
import unifiedCreate a new processor.
- @example This example shows how a new processor can be created (from
remark) and linked to stdin(4) and stdout(4).import process from 'node:process' import concatStream from 'concat-stream' import {remark} from 'remark' process.stdin.pipe( concatStream(function (buf) { process.stdout.write(String(remark().processSync(buf))) }) ) - @returns New unfrozen processor (
processor). This processor is configured to work the same as its ancestor. When the descendant processor is configured in the future it does not affect the ancestral processor.
const file: VFile(alias) read(description: Compatible, options?: BufferEncoding | ReadOptions | null | undefined): Promise<VFile> (+2 overloads)
import read(alias) unified(): Processor<undefined, undefined, undefined, undefined, undefined>
import unifiedCreate a new processor.
- @example This example shows how a new processor can be created (from
remark) and linked to stdin(4) and stdout(4).import process from 'node:process' import concatStream from 'concat-stream' import {remark} from 'remark' process.stdin.pipe( concatStream(function (buf) { process.stdout.write(String(remark().processSync(buf))) }) ) - @returns New unfrozen processor (
processor). This processor is configured to work the same as its ancestor. When the descendant processor is configured in the future it does not affect the ancestral processor.
(method) Processor<undefined, undefined, undefined, undefined, undefined>.use<[], string, Root>(plugin: Plugin<[], string, Root>, ...parameters: [] | [boolean]): Processor<Root, undefined, undefined, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const remarkParse: Plugin<[(Readonly<Options> | null | undefined)?], string, Root>
import remarkParseAdd support for parsing from markdown.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(method) Processor<Root, undefined, undefined, undefined, undefined>.use<[], Root, Root>(plugin: Plugin<[], Root, Root>, ...parameters: [] | [boolean]): Processor<Root, Root, Root, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) function remarkRehype(processor: Processor, options?: Readonly<Options> | null | undefined): TransformBridge (+2 overloads)
import remarkRehypeTurn markdown into HTML.
Notes
Signature
- if a processor is given, runs the (rehype) plugins used on it with a hast tree, then discards the result (bridge mode)
- otherwise, returns a hast tree, the plugins used after
remarkRehypeare rehype plugins (mutate mode)
👉 Note: It’s highly unlikely that you want to pass a
processor.
HTML
Raw HTML is available in mdast as html nodes and can be embedded in hast as semistandard raw nodes. Most plugins ignore raw nodes but two notable ones don’t:
rehype-stringifyalso has an optionallowDangerousHtmlwhich will output the raw HTML. This is typically discouraged as noted by the option name but is useful if you completely trust authorsrehype-rawcan handle the raw embedded HTML strings by parsing them into standard hast nodes (element,text, etc); this is a heavy task as it needs a full HTML parser, but it is the only way to support untrusted content
Footnotes
Many options supported here relate to footnotes. Footnotes are not specified by CommonMark, which we follow by default. They are supported by GitHub, so footnotes can be enabled in markdown with remark-gfm.
The options footnoteBackLabel and footnoteLabel define natural language that explains footnotes, which is hidden for sighted users but shown to assistive technology. When your page is not in English, you must define translated values.
Back references use ARIA attributes, but the section label itself uses a heading that is hidden with an sr-only class. To show it to sighted users, define different attributes in footnoteLabelProperties.
Clobbering
Footnotes introduces a problem, as it links footnote calls to footnote definitions on the page through id attributes generated from user content, which results in DOM clobbering.
DOM clobbering is this:
<p id=x></p>
<script>alert(x) // `x` now refers to the DOM `p#x` element</script>
Elements by their ID are made available by browsers on the window object, which is a security risk. Using a prefix solves this problem.
More information on how to handle clobbering and the prefix is explained in Example: headings (DOM clobbering) in rehype-sanitize.
Unknown nodes
Unknown nodes are nodes with a type that isn’t in handlers or passThrough. The default behavior for unknown nodes is:
- when the node has a
value(and doesn’t havedata.hName,data.hProperties, ordata.hChildren, see later), create a hasttextnode - otherwise, create a
<div>element (which could be changed withdata.hName), with its children mapped from mdast to hast as well
This behavior can be changed by passing an unknownHandler.
- @overload
- @overload
- @overload
- @param destination Processor or configuration (optional).
- @param options When a processor was given, configuration (optional).
- @returns Transform.
(method) Processor<Root, Root, Root, undefined, undefined>.use<[{
title: string;
}], Root, Root>(plugin: Plugin<[{
title: string;
}], Root, Root>, ...parameters: [boolean] | [{
title: string;
}]): Processor<Root, Root, Root, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) function rehypeDocument(options?: Readonly<Options> | null | undefined): (tree: Root, file: VFile) => Root
import rehypeDocumentWrap a fragment in a document.
- @param options Configuration (optional).
- @returns Transform.
(property) title: string(method) Processor<Root, Root, Root, undefined, undefined>.use<[], Root, undefined>(plugin: Plugin<[], Root, undefined>, ...parameters: [] | [boolean]): Processor<Root, Root, Root, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) function rehypeFormat(options?: Options | null | undefined): (tree: Root) => undefined
import rehypeFormatFormat whitespace in HTML.
- @param options Configuration (optional).
- @returns Transform.
(method) Processor<Root, Root, Root, undefined, undefined>.use<[], Root, string>(plugin: Plugin<[], Root, string>, ...parameters: [] | [boolean]): Processor<Root, Root, Root, Root, string> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypeStringify: Plugin<[(Options | null | undefined)?], Root, string>
import rehypeStringifyPlugin to add support for serializing as HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(method) Processor<Root, Root, Root, Root, string>.process(file?: Compatible | undefined): Promise<VFile> (+1 overload)Process the given file as configured on the processor.
Note:
processfreezes the processor if not already frozen.
Note:
processperforms the parse, run, and stringify phases.
- @overload
- @overload
- @param file File (optional); typically
stringorVFile]; any value accepted asxinnew VFile(x). - @param done Callback (optional).
- @returns Nothing if
doneis given. Otherwise a promise, rejected with a fatal error or resolved with the processed file. The parsed, transformed, and compiled value is available atfile.value(see note).Note: unified typically compiles by serializing: most compilers return
string(orUint8Array). Some compilers, such as the one configured withrehype-react, return other values (in this case, a React tree). If you’re using a compiler that doesn’t serialize, expect different result values.To register custom results in TypeScript, add them to {@linkcode CompileResultMap}.
const file: VFilevar console: Console(method) console.Console.log(...data: any[]): voidvar String: StringConstructor
(value?: any) => stringAllows manipulation and formatting of text strings and determination and location of substrings within strings.
const file: VFileThis example shows how several plugins are used. It shows that the order in which plugins are used is important. And it shows that plugins can be configured by passing options to them. In this case, rehypeDocument receives a title field.
Using presets is similar:
import rehypeParse from 'rehype-parse'
import rehypePresetMinify from 'rehype-preset-minify'
import rehypeStringify from 'rehype-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'
const file = await read('example.html')
await unified()
.use(rehypeParse)
.use(rehypePresetMinify)
.use(rehypeStringify)
.process(file)
console.log(String(file))
(alias) const rehypeParse: Plugin<[(Options | null | undefined)?], string, Root>
import rehypeParsePlugin to add support for parsing from HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(alias) const rehypePresetMinify: Preset
import rehypePresetMinifyPreset to minify HTML.
- @type {Preset}
(alias) const rehypeStringify: Plugin<[(Options | null | undefined)?], Root, string>
import rehypeStringifyPlugin to add support for serializing as HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(alias) function read(description: Compatible, options: BufferEncoding | ReadOptions | null | undefined, callback: Callback): undefined (+2 overloads)
import read(alias) const unified: Processor<undefined, undefined, undefined, undefined, undefined>
import unifiedCreate a new processor.
- @example This example shows how a new processor can be created (from
remark) and linked to stdin(4) and stdout(4).import process from 'node:process' import concatStream from 'concat-stream' import {remark} from 'remark' process.stdin.pipe( concatStream(function (buf) { process.stdout.write(String(remark().processSync(buf))) }) ) - @returns New unfrozen processor (
processor). This processor is configured to work the same as its ancestor. When the descendant processor is configured in the future it does not affect the ancestral processor.
const file: VFile(alias) read(description: Compatible, options?: BufferEncoding | ReadOptions | null | undefined): Promise<VFile> (+2 overloads)
import read(alias) unified(): Processor<undefined, undefined, undefined, undefined, undefined>
import unifiedCreate a new processor.
- @example This example shows how a new processor can be created (from
remark) and linked to stdin(4) and stdout(4).import process from 'node:process' import concatStream from 'concat-stream' import {remark} from 'remark' process.stdin.pipe( concatStream(function (buf) { process.stdout.write(String(remark().processSync(buf))) }) ) - @returns New unfrozen processor (
processor). This processor is configured to work the same as its ancestor. When the descendant processor is configured in the future it does not affect the ancestral processor.
(method) Processor<undefined, undefined, undefined, undefined, undefined>.use<[], string, Root>(plugin: Plugin<[], string, Root>, ...parameters: [] | [boolean]): Processor<Root, undefined, undefined, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypeParse: Plugin<[(Options | null | undefined)?], string, Root>
import rehypeParsePlugin to add support for parsing from HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(method) Processor<Root, undefined, undefined, undefined, undefined>.use<[], undefined, undefined>(preset?: Preset | null | undefined): Processor<Root, undefined, undefined, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypePresetMinify: Preset
import rehypePresetMinifyPreset to minify HTML.
- @type {Preset}
(method) Processor<Root, undefined, undefined, undefined, undefined>.use<[], Root, string>(plugin: Plugin<[], Root, string>, ...parameters: [] | [boolean]): Processor<Root, undefined, undefined, Root, string> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypeStringify: Plugin<[(Options | null | undefined)?], Root, string>
import rehypeStringifyPlugin to add support for serializing as HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(method) Processor<Root, undefined, undefined, Root, string>.process(file?: Compatible | undefined): Promise<VFile> (+1 overload)Process the given file as configured on the processor.
Note:
processfreezes the processor if not already frozen.
Note:
processperforms the parse, run, and stringify phases.
- @overload
- @overload
- @param file File (optional); typically
stringorVFile]; any value accepted asxinnew VFile(x). - @param done Callback (optional).
- @returns Nothing if
doneis given. Otherwise a promise, rejected with a fatal error or resolved with the processed file. The parsed, transformed, and compiled value is available atfile.value(see note).Note: unified typically compiles by serializing: most compilers return
string(orUint8Array). Some compilers, such as the one configured withrehype-react, return other values (in this case, a React tree). If you’re using a compiler that doesn’t serialize, expect different result values.To register custom results in TypeScript, add them to {@linkcode CompileResultMap}.
const file: VFilevar console: Console(method) console.Console.log(...data: any[]): voidvar String: StringConstructor
(value?: any) => stringAllows manipulation and formatting of text strings and determination and location of substrings within strings.
const file: VFilePresets themselves cannot receive options. Sometimes, you still want to pass options to a particular plugin in a preset. To configure a plugin in a preset, use it after the preset, with the correct options:
import rehypeMinifyWhitespace from 'rehype-minify-whitespace'
import rehypeParse from 'rehype-parse'
import rehypePresetMinify from 'rehype-preset-minify'
import rehypeStringify from 'rehype-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'
const file = await read('example.html')
await unified()
.use(rehypeParse)
.use(rehypePresetMinify)
.use(rehypeMinifyWhitespace, {newlines: true})
.use(rehypeStringify)
.process(file)
console.log(String(file))
(alias) function rehypeMinifyWhitespace(options?: Options | null | undefined): (tree: Root) => undefined
import rehypeMinifyWhitespaceMinify whitespace.
- @param options Configuration (optional).
- @returns Transform.
(alias) const rehypeParse: Plugin<[(Options | null | undefined)?], string, Root>
import rehypeParsePlugin to add support for parsing from HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(alias) const rehypePresetMinify: Preset
import rehypePresetMinifyPreset to minify HTML.
- @type {Preset}
(alias) const rehypeStringify: Plugin<[(Options | null | undefined)?], Root, string>
import rehypeStringifyPlugin to add support for serializing as HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(alias) function read(description: Compatible, options: BufferEncoding | ReadOptions | null | undefined, callback: Callback): undefined (+2 overloads)
import read(alias) const unified: Processor<undefined, undefined, undefined, undefined, undefined>
import unifiedCreate a new processor.
- @example This example shows how a new processor can be created (from
remark) and linked to stdin(4) and stdout(4).import process from 'node:process' import concatStream from 'concat-stream' import {remark} from 'remark' process.stdin.pipe( concatStream(function (buf) { process.stdout.write(String(remark().processSync(buf))) }) ) - @returns New unfrozen processor (
processor). This processor is configured to work the same as its ancestor. When the descendant processor is configured in the future it does not affect the ancestral processor.
const file: VFile(alias) read(description: Compatible, options?: BufferEncoding | ReadOptions | null | undefined): Promise<VFile> (+2 overloads)
import read(alias) unified(): Processor<undefined, undefined, undefined, undefined, undefined>
import unifiedCreate a new processor.
- @example This example shows how a new processor can be created (from
remark) and linked to stdin(4) and stdout(4).import process from 'node:process' import concatStream from 'concat-stream' import {remark} from 'remark' process.stdin.pipe( concatStream(function (buf) { process.stdout.write(String(remark().processSync(buf))) }) ) - @returns New unfrozen processor (
processor). This processor is configured to work the same as its ancestor. When the descendant processor is configured in the future it does not affect the ancestral processor.
(method) Processor<undefined, undefined, undefined, undefined, undefined>.use<[], string, Root>(plugin: Plugin<[], string, Root>, ...parameters: [] | [boolean]): Processor<Root, undefined, undefined, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypeParse: Plugin<[(Options | null | undefined)?], string, Root>
import rehypeParsePlugin to add support for parsing from HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(method) Processor<Root, undefined, undefined, undefined, undefined>.use<[], undefined, undefined>(preset?: Preset | null | undefined): Processor<Root, undefined, undefined, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypePresetMinify: Preset
import rehypePresetMinifyPreset to minify HTML.
- @type {Preset}
(method) Processor<Root, undefined, undefined, undefined, undefined>.use<[{
newlines: boolean;
}], Root, undefined>(plugin: Plugin<[{
newlines: boolean;
}], Root, undefined>, ...parameters: [boolean] | [{
newlines: boolean;
}]): Processor<Root, Root, undefined, undefined, undefined> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) function rehypeMinifyWhitespace(options?: Options | null | undefined): (tree: Root) => undefined
import rehypeMinifyWhitespaceMinify whitespace.
- @param options Configuration (optional).
- @returns Transform.
(property) newlines: boolean(method) Processor<Root, Root, undefined, undefined, undefined>.use<[], Root, string>(plugin: Plugin<[], Root, string>, ...parameters: [] | [boolean]): Processor<Root, Root, undefined, Root, string> (+2 overloads)Configure the processor to use a plugin, a list of usable values, or a preset.
If the processor is already using a plugin, the previous plugin configuration is changed based on the options that are passed in. In other words, the plugin is not added a second time.
Note:
usecannot be called on frozen processors. Call the processor first to create a new unfrozen processor.
- @example There are many ways to pass plugins to
.use(). This example gives an overview:import {unified} from 'unified' unified() // Plugin with options: .use(pluginA, {x: true, y: true}) // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`): .use(pluginA, {y: false, z: true}) // Plugins: .use([pluginB, pluginC]) // Two plugins, the second with options: .use([pluginD, [pluginE, {}]]) // Preset with plugins and settings: .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}}) // Settings only: .use({settings: {position: false}}) - @template {Array} [Parameters=[]]
- @template {Node | string | undefined} [Input=undefined]
- @template [Output=Input]
- @overload
- @overload
- @overload
- @param value Usable value.
- @param parameters Parameters, when a plugin is given as a usable value.
- @returns Current processor.
(alias) const rehypeStringify: Plugin<[(Options | null | undefined)?], Root, string>
import rehypeStringifyPlugin to add support for serializing as HTML.
- @this processor.
- @param Configuration (optional).
- @returns Nothing.
(method) Processor<Root, Root, undefined, Root, string>.process(file?: Compatible | undefined): Promise<VFile> (+1 overload)Process the given file as configured on the processor.
Note:
processfreezes the processor if not already frozen.
Note:
processperforms the parse, run, and stringify phases.
- @overload
- @overload
- @param file File (optional); typically
stringorVFile]; any value accepted asxinnew VFile(x). - @param done Callback (optional).
- @returns Nothing if
doneis given. Otherwise a promise, rejected with a fatal error or resolved with the processed file. The parsed, transformed, and compiled value is available atfile.value(see note).Note: unified typically compiles by serializing: most compilers return
string(orUint8Array). Some compilers, such as the one configured withrehype-react, return other values (in this case, a React tree). If you’re using a compiler that doesn’t serialize, expect different result values.To register custom results in TypeScript, add them to {@linkcode CompileResultMap}.
const file: VFilevar console: Console(method) console.Console.log(...data: any[]): voidvar String: StringConstructor
(value?: any) => stringAllows manipulation and formatting of text strings and determination and location of substrings within strings.
const file: VFile