- Notifications
You must be signed in to change notification settings - Fork93
HTML processor powered by plugins part of the@unifiedjs collective
License
rehypejs/rehype
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
rehype is a tool that transforms HTML with plugins.These plugins can inspect and change the HTML.You can use rehype on the server, the client, CLIs, deno, etc.
rehype is an ecosystem of plugins that work with HTML as structured data,specifically ASTs (abstract syntax trees).ASTs make it easy for programs to deal with HTML.We call those programs plugins.Plugins inspect and change trees.You can use the many existing plugins or you can make your own.
- to learn HTML, seeMDN andWHATWG HTML
- for more about us, see
unifiedjs.com - for questions, seesupport
- to help, seecontribute orsponsor below
With this project and a plugin, you can turn this HTML:
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>Saturn</title></head><body><h1>Saturn</h1><p>Saturn is a gas giant composed predominantly of hydrogen and helium.</p></body></html>
…into the following HTML:
<!doctypehtml><htmllang=en><metacharset=utf8><title>Saturn</title><h1>Saturn</h1><p>Saturn is a gas giant composed predominantly of hydrogen and helium.
Show example code
importrehypeParsefrom'rehype-parse'importrehypePresetMinifyfrom'rehype-preset-minify'importrehypeStringifyfrom'rehype-stringify'import{unified}from'unified'constfile=awaitunified().use(rehypeParse).use(rehypePresetMinify).use(rehypeStringify).process(`<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Saturn</title> </head> <body> <h1>Saturn</h1> <p>Saturn is a gas giant composed predominantly of hydrogen and helium.</p> </body></html>`)console.log(String(file))
With another plugin, you can turn this HTML:
<h1>Hi, Saturn!</h1>
…into the following HTML:
<h2>Hi, Saturn!</h2>
Show example code
/** *@import {Root} from 'hast' */importrehypeParsefrom'rehype-parse'importrehypeStringifyfrom'rehype-stringify'import{unified}from'unified'import{visit}from'unist-util-visit'constfile=awaitunified().use(rehypeParse,{fragment:true}).use(myRehypePluginToIncreaseHeadings).use(rehypeStringify).process('<h1>Hi, Saturn!</h1>')console.log(String(file))functionmyRehypePluginToIncreaseHeadings(){/** *@param {Root} tree */returnfunction(tree){visit(tree,'element',function(node){if(['h1','h2','h3','h4','h5'].includes(node.tagName)){node.tagName='h'+(Number(node.tagName.charAt(1))+1)}})}}
You can use rehype for many different things.unified is the core project that transforms content with ASTs.rehype adds support for HTML to unified.hast is the HTML AST that rehype uses.
This GitHub repository is a monorepo that contains the following packages:
rehype-parse— plugin to take HTML as input and turn it into a syntax tree (hast)rehype-stringify— plugin to take a syntax tree (hast) and turn it into HTML as outputrehype—unified,rehype-parse, andrehype-stringify, useful when input andoutput are HTMLrehype-cli— CLI aroundrehypeto inspect and format HTML in scripts
Depending on the input you have and output you want, you can use different partsof rehype.If the input is HTML, you can userehype-parse withunified.If the output is HTML, you can userehype-stringify withunifiedIf both the input and output are HTML, you can userehype on its own.When you want to inspect and format HTML files in a project, you can userehype-cli.
rehype plugins deal with HTML.You can choose from the many plugins that already exist.Here are three good ways to find plugins:
awesome-rehype— selection of the most awesome projects- List of plugins— list of all plugins
rehype-plugintopic— any tagged repo on GitHub
Some plugins are maintained by us here in the@rehypejs organization whileothers are maintained by folks elsewhere.Anyone can make rehype plugins, so as always when choosing whether to includedependencies in your project, make sure to carefully assess the quality ofrehype plugins too.
The rehype organization and the unified collective as a whole is fully typedwithTypeScript.Types for hast are available in@types/hast.
Projects maintained by the unified collective are compatible with maintainedversions of Node.js.
When we cut a new major release, we drop support for unmaintained versions ofNode.This means we try to keep the current release line compatible with Node.js 16.
As improper use of HTML can open you up to across-site scripting (XSS)attacks, use of rehype can also be unsafe.Userehype-sanitize to make the tree safe.
Use of rehype plugins could also open you up to other attacks.Carefully assess each plugin and the risks involved in using them.
For info on how to submit a report, see oursecurity policy.
Seecontributing.md inrehypejs/.github for waysto get started.Seesupport.md for ways to get help.Join us inDiscussions to chat with the community and contributors.
This project has acode of conduct.By interacting with this repository, organization, or community you agree toabide by its terms.
Support this effort and give back by sponsoring onOpenCollective!
| Vercel | Motif | HashiCorp | GitBook | Gatsby | |||||
Netlify | Coinbase | ThemeIsle | Expo | Boost Note | Markdown Space | Holloway | |||
You? | |||||||||
About
HTML processor powered by plugins part of the@unifiedjs collective
