762 lines
25 KiB
Markdown
762 lines
25 KiB
Markdown
# remark-rehype
|
||
|
||
[![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]
|
||
|
||
**[remark][]** plugin that turns markdown into HTML to support **[rehype][]**.
|
||
|
||
## Contents
|
||
|
||
* [What is this?](#what-is-this)
|
||
* [When should I use this?](#when-should-i-use-this)
|
||
* [Install](#install)
|
||
* [Use](#use)
|
||
* [API](#api)
|
||
* [`defaultFootnoteBackContent(referenceIndex, rereferenceIndex)`](#defaultfootnotebackcontentreferenceindex-rereferenceindex)
|
||
* [`defaultFootnoteBackLabel(referenceIndex, rereferenceIndex)`](#defaultfootnotebacklabelreferenceindex-rereferenceindex)
|
||
* [`defaultHandlers`](#defaulthandlers)
|
||
* [`unified().use(remarkRehype[, destination][, options])`](#unifieduseremarkrehype-destination-options)
|
||
* [`Options`](#options)
|
||
* [Examples](#examples)
|
||
* [Example: supporting HTML in markdown naïvely](#example-supporting-html-in-markdown-naïvely)
|
||
* [Example: supporting HTML in markdown properly](#example-supporting-html-in-markdown-properly)
|
||
* [Example: footnotes in languages other than English](#example-footnotes-in-languages-other-than-english)
|
||
* [HTML](#html-1)
|
||
* [CSS](#css)
|
||
* [Syntax tree](#syntax-tree)
|
||
* [Types](#types)
|
||
* [Compatibility](#compatibility)
|
||
* [Security](#security)
|
||
* [Related](#related)
|
||
* [Contribute](#contribute)
|
||
* [License](#license)
|
||
|
||
## What is this?
|
||
|
||
This package is a [unified][] ([remark][]) plugin that switches from remark (the
|
||
markdown ecosystem) to rehype (the HTML ecosystem).
|
||
It does this by transforming the current markdown (mdast) syntax tree into an
|
||
HTML (hast) syntax tree.
|
||
remark plugins deal with mdast and rehype plugins deal with hast, so plugins
|
||
used after `remark-rehype` have to be rehype plugins.
|
||
|
||
The reason that there are different ecosystems for markdown and HTML is that
|
||
turning markdown into HTML is, while frequently needed, not the only purpose of
|
||
markdown.
|
||
Checking (linting) and formatting markdown are also common use cases for
|
||
remark and markdown.
|
||
There are several aspects of markdown that do not translate 1-to-1 to HTML.
|
||
In some cases markdown contains more information than HTML: for example, there
|
||
are several ways to add a link in markdown (as in, autolinks: `<https://url>`,
|
||
resource links: `[label](url)`, and reference links with definitions:
|
||
`[label][id]` and `[id]: url`).
|
||
In other cases HTML contains more information than markdown: there are many
|
||
tags, which add new meaning (semantics), available in HTML that aren’t available
|
||
in markdown.
|
||
If there was just one AST, it would be quite hard to perform the tasks that
|
||
several remark and rehype plugins currently do.
|
||
|
||
## When should I use this?
|
||
|
||
This project is useful when you want to turn markdown to HTML.
|
||
It opens up a whole new ecosystem with tons of plugins to do all kinds of
|
||
things.
|
||
You can [minify HTML][rehype-minify], [format HTML][rehype-format],
|
||
[make sure it’s safe][rehype-sanitize], [highlight code][rehype-highlight],
|
||
[add metadata][rehype-meta], and a lot more.
|
||
|
||
A different plugin, [`rehype-raw`][rehype-raw], adds support for raw HTML
|
||
written inside markdown.
|
||
This is a separate plugin because supporting HTML inside markdown is a heavy
|
||
task (performance and bundle size) and not always needed.
|
||
To use both together, you also have to configure `remark-rehype` with
|
||
`allowDangerousHtml: true` and then use `rehype-raw`.
|
||
|
||
The rehype plugin [`rehype-remark`][rehype-remark] does the inverse of this
|
||
plugin.
|
||
It turns HTML into markdown.
|
||
|
||
If you don’t use plugins and want to access syntax trees, you can use
|
||
[`mdast-util-to-hast`][mdast-util-to-hast].
|
||
|
||
## Install
|
||
|
||
This package is [ESM only][esm].
|
||
In Node.js (version 16+), install with [npm][]:
|
||
|
||
```sh
|
||
npm install remark-rehype
|
||
```
|
||
|
||
In Deno with [`esm.sh`][esmsh]:
|
||
|
||
```js
|
||
import remarkRehype from 'https://esm.sh/remark-rehype@11'
|
||
```
|
||
|
||
In browsers with [`esm.sh`][esmsh]:
|
||
|
||
```html
|
||
<script type="module">
|
||
import remarkRehype from 'https://esm.sh/remark-rehype@11?bundle'
|
||
</script>
|
||
```
|
||
|
||
## Use
|
||
|
||
Say our document `example.md` contains:
|
||
|
||
```markdown
|
||
# Pluto
|
||
|
||
**Pluto** (minor-planet designation: **134340 Pluto**) is a
|
||
[dwarf planet](https://en.wikipedia.org/wiki/Dwarf_planet) in the
|
||
[Kuiper belt](https://en.wikipedia.org/wiki/Kuiper_belt).
|
||
```
|
||
|
||
…and our module `example.js` contains:
|
||
|
||
```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 {read} from 'to-vfile'
|
||
import {unified} from 'unified'
|
||
import {reporter} from 'vfile-reporter'
|
||
|
||
const file = await unified()
|
||
.use(remarkParse)
|
||
.use(remarkRehype)
|
||
.use(rehypeDocument)
|
||
.use(rehypeFormat)
|
||
.use(rehypeStringify)
|
||
.process(await read('example.md'))
|
||
|
||
console.error(reporter(file))
|
||
console.log(String(file))
|
||
```
|
||
|
||
…then running `node example.js` yields:
|
||
|
||
```txt
|
||
example.md: no issues found
|
||
```
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>example</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
</head>
|
||
<body>
|
||
<h1>Pluto</h1>
|
||
<p>
|
||
<strong>Pluto</strong> (minor-planet designation: <strong>134340 Pluto</strong>) is a
|
||
<a href="https://en.wikipedia.org/wiki/Dwarf_planet">dwarf planet</a> in the
|
||
<a href="https://en.wikipedia.org/wiki/Kuiper_belt">Kuiper belt</a>.
|
||
</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## API
|
||
|
||
This package exports the identifiers
|
||
[`defaultFootnoteBackContent`][api-default-footnote-back-content],
|
||
[`defaultFootnoteBackLabel`][api-default-footnote-back-label], and
|
||
[`defaultHandlers`][api-default-handlers].
|
||
The default export is [`remarkRehype`][api-remark-rehype].
|
||
|
||
### `defaultFootnoteBackContent(referenceIndex, rereferenceIndex)`
|
||
|
||
See [`defaultFootnoteBackContent` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-content]
|
||
|
||
### `defaultFootnoteBackLabel(referenceIndex, rereferenceIndex)`
|
||
|
||
See [`defaultFootnoteBackLabel` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-label]
|
||
|
||
### `defaultHandlers`
|
||
|
||
See [`defaultHandlers` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-default-handlers]
|
||
|
||
### `unified().use(remarkRehype[, destination][, options])`
|
||
|
||
Turn markdown into HTML.
|
||
|
||
###### Parameters
|
||
|
||
* `destination` ([`Processor`][unified-processor], optional)
|
||
— processor
|
||
* `options` ([`Options`][api-options], optional)
|
||
— configuration
|
||
|
||
###### Returns
|
||
|
||
Transform ([`Transformer`][unified-transformer]).
|
||
|
||
##### Notes
|
||
|
||
###### Signature
|
||
|
||
* if a [processor][unified-processor] is given, runs the (rehype) plugins
|
||
used on it with a hast tree, then discards the result
|
||
([*bridge mode*][unified-mode])
|
||
* otherwise, returns a hast tree, the plugins used after `remarkRehype`
|
||
are rehype plugins ([*mutate mode*][unified-mode])
|
||
|
||
> 👉 **Note**: It’s highly unlikely that you want to pass a `processor`.
|
||
|
||
###### HTML
|
||
|
||
Raw HTML is available in mdast as [`html`][mdast-html] nodes and can be embedded
|
||
in hast as semistandard `raw` nodes.
|
||
Most plugins ignore `raw` nodes but two notable ones don’t:
|
||
|
||
* [`rehype-stringify`][rehype-stringify] also has an option
|
||
`allowDangerousHtml` which will output the raw HTML.
|
||
This is typically discouraged as noted by the option name but is useful if
|
||
you completely trust authors
|
||
* [`rehype-raw`][rehype-raw] can 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`][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:
|
||
|
||
```html
|
||
<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`][rehype-sanitize-clobber].
|
||
|
||
###### 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 have `data.hName`,
|
||
`data.hProperties`, or `data.hChildren`, see later), create a hast `text`
|
||
node
|
||
* otherwise, create a `<div>` element (which could be changed with
|
||
`data.hName`), with its children mapped from mdast to hast as well
|
||
|
||
This behavior can be changed by passing an `unknownHandler`.
|
||
|
||
### `Options`
|
||
|
||
Configuration (TypeScript type).
|
||
|
||
###### Fields
|
||
|
||
* `allowDangerousHtml` (`boolean`, default: `false`)
|
||
— whether to persist raw HTML in markdown in the hast tree
|
||
* `clobberPrefix` (`string`, default: `'user-content-'`)
|
||
— prefix to use before the `id` property on footnotes to prevent them from
|
||
*clobbering*
|
||
* `footnoteBackContent`
|
||
([`FootnoteBackContentTemplate` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-footnote-back-content-template]
|
||
or `string`, default:
|
||
[`defaultFootnoteBackContent` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-content])
|
||
— content of the backreference back to references
|
||
* `footnoteBackLabel`
|
||
([`FootnoteBackLabelTemplate` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-footnote-back-label-template]
|
||
or `string`, default:
|
||
[`defaultFootnoteBackLabel` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-label])
|
||
— label to describe the backreference back to references
|
||
* `footnoteLabel` (`string`, default: `'Footnotes'`)
|
||
— label to use for the footnotes section (affects screen readers)
|
||
* `footnoteLabelProperties`
|
||
([`Properties` from `@types/hast`][hast-properties], default:
|
||
`{className: ['sr-only']}`)
|
||
— properties to use on the footnote label
|
||
(note that `id: 'footnote-label'` is always added as footnote calls use it
|
||
with `aria-describedby` to provide an accessible label)
|
||
* `footnoteLabelTagName` (`string`, default: `h2`)
|
||
— tag name to use for the footnote label
|
||
* `handlers` ([`Handlers` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-handlers], optional)
|
||
— extra handlers for nodes
|
||
* `passThrough` (`Array<Nodes['type']>`, optional)
|
||
— list of custom mdast node types to pass through (keep) in hast (note that
|
||
the node itself is passed, but eventual children are transformed)
|
||
* `unknownHandler` ([`Handler` from
|
||
`mdast-util-to-hast`][mdast-util-to-hast-handler], optional)
|
||
— handle all unknown nodes
|
||
|
||
## Examples
|
||
|
||
### Example: supporting HTML in markdown naïvely
|
||
|
||
If you completely trust the authors of the input markdown and want to allow them
|
||
to write HTML inside markdown, you can pass `allowDangerousHtml` to
|
||
`remark-rehype` and `rehype-stringify`:
|
||
|
||
```js
|
||
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, {allowDangerousHtml: true})
|
||
.use(rehypeStringify, {allowDangerousHtml: true})
|
||
.process('<a href="/wiki/Dysnomia_(moon)" onclick="alert(1)">Dysnomia</a>')
|
||
|
||
console.log(String(file))
|
||
```
|
||
|
||
Yields:
|
||
|
||
```html
|
||
<p><a href="/wiki/Dysnomia_(moon)" onclick="alert(1)">Dysnomia</a></p>
|
||
```
|
||
|
||
> ⚠️ **Danger**: observe that the XSS attack through `onclick` is present.
|
||
|
||
### Example: supporting HTML in markdown properly
|
||
|
||
If you do not trust the authors of the input markdown, or if you want to make
|
||
sure that rehype plugins can see HTML embedded in markdown, use
|
||
[`rehype-raw`][rehype-raw].
|
||
The following example passes `allowDangerousHtml` to `remark-rehype`, then
|
||
turns the raw embedded HTML into proper HTML nodes with `rehype-raw`, and
|
||
finally sanitizes the HTML by only allowing safe things with
|
||
`rehype-sanitize`:
|
||
|
||
```js
|
||
import rehypeSanitize from 'rehype-sanitize'
|
||
import rehypeStringify from 'rehype-stringify'
|
||
import rehypeRaw from 'rehype-raw'
|
||
import remarkParse from 'remark-parse'
|
||
import remarkRehype from 'remark-rehype'
|
||
import {unified} from 'unified'
|
||
|
||
const file = await unified()
|
||
.use(remarkParse)
|
||
.use(remarkRehype, {allowDangerousHtml: true})
|
||
.use(rehypeRaw)
|
||
.use(rehypeSanitize)
|
||
.use(rehypeStringify)
|
||
.process('<a href="/wiki/Dysnomia_(moon)" onclick="alert(1)">Dysnomia</a>')
|
||
|
||
console.log(String(file))
|
||
```
|
||
|
||
Running that code yields:
|
||
|
||
```html
|
||
<p><a href="/wiki/Dysnomia_(moon)">Dysnomia</a></p>
|
||
```
|
||
|
||
> ⚠️ **Danger**: observe that the XSS attack through `onclick` is **not**
|
||
> present.
|
||
|
||
### Example: footnotes in languages other than English
|
||
|
||
If you know that the markdown is authored in a language other than English,
|
||
and you’re using `remark-gfm` to match how GitHub renders markdown, and you know
|
||
that footnotes are (or can?) be used, you should translate the labels associated
|
||
with them.
|
||
|
||
Let’s first set the stage:
|
||
|
||
```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'
|
||
|
||
const doc = `
|
||
Ceres ist nach der römischen Göttin des Ackerbaus benannt;
|
||
ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.[^nasa-2015]
|
||
|
||
[^nasa-2015]: JPL/NASA:
|
||
[*What is a Dwarf Planet?*](https://www.jpl.nasa.gov/infographics/what-is-a-dwarf-planet)
|
||
In: Jet Propulsion Laboratory.
|
||
22. April 2015,
|
||
abgerufen am 19. Januar 2022 (englisch).
|
||
`
|
||
|
||
const file = await unified()
|
||
.use(remarkParse)
|
||
.use(remarkGfm)
|
||
.use(remarkRehype)
|
||
.use(rehypeStringify)
|
||
.process(doc)
|
||
|
||
console.log(String(file))
|
||
```
|
||
|
||
Yields:
|
||
|
||
```html
|
||
<p>Ceres ist nach der römischen Göttin des Ackerbaus benannt;
|
||
ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.<sup><a href="#user-content-fn-nasa-2015" id="user-content-fnref-nasa-2015" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
|
||
<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
|
||
<ol>
|
||
<li id="user-content-fn-nasa-2015">
|
||
<p>JPL/NASA:
|
||
<a href="https://www.jpl.nasa.gov/infographics/what-is-a-dwarf-planet"><em>What is a Dwarf Planet?</em></a>
|
||
In: Jet Propulsion Laboratory.
|
||
22. April 2015,
|
||
abgerufen am 19. Januar 2022 (englisch). <a href="#user-content-fnref-nasa-2015" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
```
|
||
|
||
This is a mix of English and German that isn’t very accessible, such as that
|
||
screen readers can’t handle it nicely.
|
||
Let’s say our program *does* know that the markdown is in German.
|
||
In that case, it’s important to translate and define the labels relating to
|
||
footnotes so that screen reader users can properly pronounce the page:
|
||
|
||
```diff
|
||
@@ -18,7 +18,16 @@ ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.[^nasa-2015]
|
||
const file = await unified()
|
||
.use(remarkParse)
|
||
.use(remarkGfm)
|
||
- .use(remarkRehype)
|
||
+ .use(remarkRehype, {
|
||
+ footnoteBackLabel(referenceIndex, rereferenceIndex) {
|
||
+ return (
|
||
+ 'Hochspringen nach: ' +
|
||
+ (referenceIndex + 1) +
|
||
+ (rereferenceIndex > 1 ? '-' + rereferenceIndex : '')
|
||
+ )
|
||
+ },
|
||
+ footnoteLabel: 'Fußnoten'
|
||
+ })
|
||
.use(rehypeStringify)
|
||
.process(doc)
|
||
```
|
||
|
||
Running the code with the above patch applied, yields:
|
||
|
||
```diff
|
||
@@ -1,13 +1,13 @@
|
||
<p>Ceres ist nach der römischen Göttin des Ackerbaus benannt;
|
||
ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.<sup><a href="#user-content-fn-nasa-2015" id="user-content-fnref-nasa-2015" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
|
||
-<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
|
||
+<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Fußnoten</h2>
|
||
<ol>
|
||
<li id="user-content-fn-nasa-2015">
|
||
<p>JPL/NASA:
|
||
<a href="https://www.jpl.nasa.gov/infographics/what-is-a-dwarf-planet"><em>What is a Dwarf Planet?</em></a>
|
||
In: Jet Propulsion Laboratory.
|
||
22. April 2015,
|
||
-abgerufen am 19. Januar 2022 (englisch). <a href="#user-content-fnref-nasa-2015" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
|
||
+abgerufen am 19. Januar 2022 (englisch). <a href="#user-content-fnref-nasa-2015" data-footnote-backref="" aria-label="Hochspringen nach: 1" class="data-footnote-backref">↩</a></p>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
```
|
||
|
||
## HTML
|
||
|
||
See [*Algorithm* in
|
||
`mdast-util-to-hast`](https://github.com/syntax-tree/mdast-util-to-hast#algorithm)
|
||
for info on how mdast (markdown) nodes are transformed to hast (HTML).
|
||
|
||
## CSS
|
||
|
||
Assuming you know how to use (semantic) HTML and CSS, then it should generally
|
||
be straightforward to style the HTML produced by this plugin.
|
||
With CSS, you can get creative and style the results as you please.
|
||
|
||
Some semistandard features, notably GFMs tasklists and footnotes, generate HTML
|
||
that be unintuitive, as it matches exactly what GitHub produces for their
|
||
website.
|
||
There is a project, [`sindresorhus/github-markdown-css`][github-markdown-css],
|
||
that exposes the stylesheet that GitHub uses for rendered markdown, which might
|
||
either be inspirational for more complex features, or can be used as-is to
|
||
exactly match how GitHub styles rendered markdown.
|
||
|
||
The following CSS is needed to make footnotes look a bit like GitHub:
|
||
|
||
```css
|
||
/* Style the footnotes section. */
|
||
.footnotes {
|
||
font-size: smaller;
|
||
color: #8b949e;
|
||
border-top: 1px solid #30363d;
|
||
}
|
||
|
||
/* Hide the section label for visual users. */
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
word-wrap: normal;
|
||
border: 0;
|
||
}
|
||
|
||
/* Place `[` and `]` around footnote calls. */
|
||
[data-footnote-ref]::before {
|
||
content: '[';
|
||
}
|
||
|
||
[data-footnote-ref]::after {
|
||
content: ']';
|
||
}
|
||
```
|
||
|
||
## Syntax tree
|
||
|
||
This projects turns [mdast][] (markdown) into [hast][] (HTML).
|
||
|
||
It extends mdast by supporting `data` fields on mdast nodes to specify how they
|
||
should be transformed.
|
||
See [*Fields on nodes* in
|
||
`mdast-util-to-hast`](https://github.com/syntax-tree/mdast-util-to-hast#fields-on-nodes)
|
||
for info on how these fields work.
|
||
|
||
It extends hast by using a semistandard raw nodes for raw HTML.
|
||
See the [*HTML* note above](#html) for more info.
|
||
|
||
## Types
|
||
|
||
This package is fully typed with [TypeScript][].
|
||
It exports the types
|
||
[`Options`][api-options].
|
||
|
||
The types of `mdast-util-to-hast` can be referenced to register data fields
|
||
with `@types/mdast` and `Raw` nodes with `@types/hast`.
|
||
|
||
```js
|
||
// Include `data` fields in mdast and `raw` nodes in hast.
|
||
/// <reference types="mdast-util-to-hast" />
|
||
|
||
import {visit} from 'unist-util-visit'
|
||
|
||
/** @type {import('mdast').Root} */
|
||
const mdastNode = {/* … */}
|
||
console.log(mdastNode.data?.hName) // Typed as `string | undefined`.
|
||
|
||
/** @type {import('hast').Root} */
|
||
const hastNode = {/* … */}
|
||
|
||
visit(hastNode, function (node) {
|
||
// `node` can now be `raw`.
|
||
})
|
||
```
|
||
|
||
## 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, `remark-rehype@^11`,
|
||
compatible with Node.js 16.
|
||
|
||
This plugin works with `unified` version 6+, `remark-parse` version 3+ (used in
|
||
`remark` version 7), and `rehype-stringify` version 3+ (used in `rehype`
|
||
version 5).
|
||
|
||
## Security
|
||
|
||
Use of `remark-rehype` can open you up to a
|
||
[cross-site scripting (XSS)][wiki-xss] attack.
|
||
Embedded **[hast][]** properties (`hName`, `hProperties`, `hChildren`) in
|
||
[mdast][], custom handlers, and the `allowDangerousHtml` option all provide
|
||
openings.
|
||
Use [`rehype-sanitize`][rehype-sanitize] to make the tree safe.
|
||
|
||
## Related
|
||
|
||
* [`rehype-raw`][rehype-raw]
|
||
— rehype plugin to parse the tree again and support `raw` nodes
|
||
* [`rehype-sanitize`][rehype-sanitize]
|
||
— rehype plugin to sanitize HTML
|
||
* [`rehype-remark`](https://github.com/rehypejs/rehype-remark)
|
||
— rehype plugin to turn HTML into markdown
|
||
* [`rehype-retext`](https://github.com/rehypejs/rehype-retext)
|
||
— rehype plugin to support retext
|
||
* [`remark-retext`](https://github.com/remarkjs/remark-retext)
|
||
— remark plugin to support retext
|
||
|
||
## Contribute
|
||
|
||
See [`contributing.md`][contributing] in [`remarkjs/.github`][health] for ways
|
||
to get started.
|
||
See [`support.md`][support] for ways to get help.
|
||
|
||
This project has a [code of conduct][coc].
|
||
By interacting with this repository, organization, or community you agree to
|
||
abide by its terms.
|
||
|
||
## License
|
||
|
||
[MIT][license] © [Titus Wormer][author]
|
||
|
||
<!-- Definitions -->
|
||
|
||
[build-badge]: https://github.com/remarkjs/remark-rehype/workflows/main/badge.svg
|
||
|
||
[build]: https://github.com/remarkjs/remark-rehype/actions
|
||
|
||
[coverage-badge]: https://img.shields.io/codecov/c/github/remarkjs/remark-rehype.svg
|
||
|
||
[coverage]: https://codecov.io/github/remarkjs/remark-rehype
|
||
|
||
[downloads-badge]: https://img.shields.io/npm/dm/remark-rehype.svg
|
||
|
||
[downloads]: https://www.npmjs.com/package/remark-rehype
|
||
|
||
[size-badge]: https://img.shields.io/bundlejs/size/remark-rehype
|
||
|
||
[size]: https://bundlejs.com/?q=remark-rehype
|
||
|
||
[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
|
||
|
||
[backers-badge]: https://opencollective.com/unified/backers/badge.svg
|
||
|
||
[collective]: https://opencollective.com/unified
|
||
|
||
[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
|
||
|
||
[chat]: https://github.com/remarkjs/remark/discussions
|
||
|
||
[npm]: https://docs.npmjs.com/cli/install
|
||
|
||
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
|
||
|
||
[esmsh]: https://esm.sh
|
||
|
||
[health]: https://github.com/remarkjs/.github
|
||
|
||
[contributing]: https://github.com/remarkjs/.github/blob/main/contributing.md
|
||
|
||
[support]: https://github.com/remarkjs/.github/blob/main/support.md
|
||
|
||
[coc]: https://github.com/remarkjs/.github/blob/main/code-of-conduct.md
|
||
|
||
[license]: license
|
||
|
||
[author]: https://wooorm.com
|
||
|
||
[github-markdown-css]: https://github.com/sindresorhus/github-markdown-css
|
||
|
||
[hast]: https://github.com/syntax-tree/hast
|
||
|
||
[hast-properties]: https://github.com/syntax-tree/hast#properties
|
||
|
||
[mdast]: https://github.com/syntax-tree/mdast
|
||
|
||
[mdast-html]: https://github.com/syntax-tree/mdast#html
|
||
|
||
[mdast-util-to-hast]: https://github.com/syntax-tree/mdast-util-to-hast
|
||
|
||
[mdast-util-to-hast-default-footnote-back-content]: https://github.com/syntax-tree/mdast-util-to-hast#defaultfootnotebackcontentreferenceindex-rereferenceindex
|
||
|
||
[mdast-util-to-hast-default-footnote-back-label]: https://github.com/syntax-tree/mdast-util-to-hast#defaultfootnotebacklabelreferenceindex-rereferenceindex
|
||
|
||
[mdast-util-to-hast-footnote-back-content-template]: https://github.com/syntax-tree/mdast-util-to-hast#footnotebackcontenttemplate
|
||
|
||
[mdast-util-to-hast-footnote-back-label-template]: https://github.com/syntax-tree/mdast-util-to-hast#footnotebacklabeltemplate
|
||
|
||
[mdast-util-to-hast-default-handlers]: https://github.com/syntax-tree/mdast-util-to-hast#defaulthandlers
|
||
|
||
[mdast-util-to-hast-handlers]: https://github.com/syntax-tree/mdast-util-to-hast#handlers
|
||
|
||
[mdast-util-to-hast-handler]: https://github.com/syntax-tree/mdast-util-to-hast#handler
|
||
|
||
[rehype]: https://github.com/rehypejs/rehype
|
||
|
||
[rehype-format]: https://github.com/rehypejs/rehype-format
|
||
|
||
[rehype-highlight]: https://github.com/rehypejs/rehype-highlight
|
||
|
||
[rehype-meta]: https://github.com/rehypejs/rehype-meta
|
||
|
||
[rehype-minify]: https://github.com/rehypejs/rehype-minify
|
||
|
||
[rehype-raw]: https://github.com/rehypejs/rehype-raw
|
||
|
||
[rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize
|
||
|
||
[rehype-sanitize-clobber]: https://github.com/rehypejs/rehype-sanitize#example-headings-dom-clobbering
|
||
|
||
[rehype-stringify]: https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify
|
||
|
||
[rehype-remark]: https://github.com/rehypejs/rehype-remark
|
||
|
||
[remark]: https://github.com/remarkjs/remark
|
||
|
||
[remark-gfm]: https://github.com/remarkjs/remark-gfm
|
||
|
||
[typescript]: https://www.typescriptlang.org
|
||
|
||
[unified]: https://github.com/unifiedjs/unified
|
||
|
||
[unified-mode]: https://github.com/unifiedjs/unified#transforming-between-ecosystems
|
||
|
||
[unified-processor]: https://github.com/unifiedjs/unified#processor
|
||
|
||
[unified-transformer]: https://github.com/unifiedjs/unified#transformer
|
||
|
||
[wiki-xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
|
||
|
||
[api-default-footnote-back-content]: #defaultfootnotebackcontentreferenceindex-rereferenceindex
|
||
|
||
[api-default-footnote-back-label]: #defaultfootnotebacklabelreferenceindex-rereferenceindex
|
||
|
||
[api-default-handlers]: #defaulthandlers
|
||
|
||
[api-options]: #options
|
||
|
||
[api-remark-rehype]: #unifieduseremarkrehype-destination-options
|