rehype-dom
unified processor with support for parsing HTML input and serializing HTML as output.
Contents
- What is this?
- When should I use this?
- Install
- Use
- API
- Examples
- Types
- Compatibility
- Security
- Contribute
- License
What is this?
This is like rehype
but for browsers.
When should I use this?
Use this package when you want to use rehype
in browsers. See the monorepo readme for info on when to use rehype-dom
.
Install
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install rehype-dom
In Deno with esm.sh
:
import {rehypeDom} from 'https://esm.sh/rehype-dom@6'
In browsers with esm.sh
:
<script type="module">
import {rehypeDom} from 'https://esm.sh/rehype-dom@6?bundle'
</script>
Use
Say our page example.html
looks as follows:
<!doctype html>
<title>Example</title>
<body>
<script type="module">
import {rehypeDom} from 'https://esm.sh/rehype-dom@6?bundle'
const file = await rehypeDom().process('<h1>Hi <del>Mars</del>Venus!</h1>')
document.body.innerHTML = String(file)
</script>
Now running open example.html
renders the following in <body>
:
<h1>Hi <del>Mars</del>Venus!</h1>
API
This package exports the following identifier: rehypeDom
. There is no default export.
rehypeDom()
Create a new (unfrozen) unified
processor that already uses rehype-dom-parse
and rehype-dom-stringify
and you can add more plugins to. See unified
for more information.
👉 Note: the default of the
fragment
option istrue
in this package, which is different from the value inrehype
, because it makes more sense in browsers.
Examples
Example: passing options
When you use remark-dom-parse
and remark-dom-stringify
manually you can pass options to use
. Because these are already used in rehype-dom
, that’s not possible. To define options for them, you can instead pass options to data
:
import {rehypeDom} from 'https://esm.sh/rehype-dom@6?bundle'
const file = await rehypeDom()
.data('settings', {fragment: false})
.process('<!doctype html>' + document.documentElement.outerHTML)
console.log(String(file))
Types
This package is fully typed with TypeScript. There are no extra exported types.
Compatibility
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.
Security
Use of rehype-dom
can open you up to a cross-site scripting (XSS) attack if the result is used with the actual DOM. Use rehype-sanitize
to solve that.
Contribute
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, organisation, or community you agree to abide by its terms.