Plugins

rehype is a tool that transforms HTML with plugins. See the monorepo readme for info on what the rehype ecosystem is. This page lists existing plugins.

List of plugins

See awesome-rehype for the most awesome projects in the ecosystem. More plugins can be found on GitHub tagged with the rehype-plugin topic.

💡 Tip: rehype plugins work with HTML and remark plugins work with markdown. See remark’s List of plugins for more plugins.

The list of plugins:

rehype-accessible-emojis — make emojis accessible adding role & aria-label
rehype-annotate — add W3C-style annotations
rehype-attr — new markdown syntax to add attributes.
rehype-auto-ads — inserts an ad code for each specified number of paragraphs
rehype-autolink-headings — add links to headings
rehype-callouts — render blockquote-based callouts (admonitions/alerts)
rehype-citation — add citation and bibliography from bibtex
rehype-class-names — add classes by selector
rehype-code-group — group code blocks (or any element) with highly customizable tabs.
rehype-color-chips — add color chips to inline code blocks with color codes
rehype-components — render components (custom elements)
rehype-concat-css-style — concatenate <style>s together
rehype-concat-javascript — concatenate <script>s together
rehype-css-to-top — move <link>s to <head>
rehype-document — wrap in a document
rehype-dom-parse — add support for parsing HTML input in browsers
rehype-dom-stringify — add support for serializing HTML in browsers
rehype-external-links — add rel (and target) to external links
rehype-extract-meta — extract meta data from an HTML document
rehype-figure — support figure and caption from images
rehype-format — format HTML
rehype-graphviz-diagram — render Graphviz diagrams as SVG
rehype-highlight — syntax highlight code blocks with Highlight.js via lowlight
rehype-highlight-code-block — syntax highlight code blocks with any function you provide
rehype-highlight-code-lines — add line numbers to code blocks; allow highlighting of desired code lines
rehype-infer-description-meta — infer file metadata from the contents of the document
rehype-infer-reading-time-meta — infer reading time as file metadata from the document
rehype-infer-title-meta — infer file metadata from the main title of a document
rehype-inline — inline JS, CSS, and image files
rehype-inline-svg — inline and optimize SVG images
rehype-ignore — ignore content display via HTML comments.
rehype-jargon — inserts definitions for jargon terms
rehype-javascript-to-bottom — move <script>s to the end of <body>
rehype-join-line — resolve line breaks in Chinese paragraphs
rehype-katex — render math with KaTeX
rehype-katex-notranslate — add translate="no" to KaTeX blocks to prevent translation
rehype-lodash-template — replace template strings with values from the dictionary
rehype-mathjax — render math with MathJax
rehype-mathml — render math as MathML with Temml
rehype-mermaidjs — render mermaid diagrams
rehype-meta — add metadata to the head of a document
rehype-minify — minify HTML
rehype-minify-attribute-whitespace — minify whitespace in attributes
rehype-minify-css-style — minify CSS in <style>s
rehype-minify-enumerated-attribute — minify enumerated attributes
rehype-minify-event-handler — minify event handler attributes
rehype-minify-javascript-script — minify JS in <script>s
rehype-minify-javascript-url — minify javascript: URLs
rehype-minify-json-script — minify JSON in <script>s
rehype-minify-language — minify lang attributes
rehype-minify-media-attribute — minify media attributes
rehype-minify-meta-color — minify content of theme color <meta>s
rehype-minify-meta-content — minify content on <meta>s
rehype-minify-style-attribute — minify style attributes
rehype-minify-url — minify URL attributes
rehype-minify-whitespace — minify whitespace between elements
rehype-normalize-attribute-value-case — normalize casing of attribute values
rehype-partials — partials support for rehype
rehype-picture — wrap images in <picture>s
rehype-postcss — run PostCSS on <style> nodes and elements with a style attribute
rehype-prevent-favicon-request — prevent a request by setting an empty favicon.ico
rehype-prism — syntax highlighting with Prism via refractor
rehype-prism-plus — syntax highlighting with Prism via refractor with extras
rehype-raw — parse the tree again (and raw nodes)
rehype-react — compile to React
rehype-remark — remark support
rehype-remove-comments — remove comments
rehype-remove-duplicate-attribute-values — remove duplicate attribute values
rehype-remove-empty-attribute — remove empty attributes
rehype-remove-external-script-content — remove content on <script>s w/ src
rehype-remove-images
rehype-remove-meta-http-equiv — replace certain http-equivs with shorter alternatives
rehype-remove-script-type-javascript — remove type and language on JS <script>s
rehype-remove-style-type-css — remove type on CSS <style>s and <link>s
rehype-remove-unused-css — remove unused css
rehype-resolution — inject resolution srcset into images
rehype-retext — retext support
rehype-rewrite — rewrite element with rehype
rehype-sanitize — sanitize HTML
rehype-scroll-to-top — customizable “Scroll to Top” and “Scroll to Bottom” links
rehype-section — wrap headings and their contents into nested <section> elements
rehype-sectionize — wrap headings and their contents into nested <section> elements, with attributes
rehype-semantic-blockquotes — new blockquote syntax to mention/cite sources in a semantically correct way
rehype-semantic-images — enrich HTML images with semantic elements and customizable features
rehype-shift-heading — change the rank of headings
rehype-shiki — syntax highlight code blocks with Shiki
rehype-slots — replace slot elements with injected content
rehype-slug — add ids to headings
rehype-slug-custom-id — add ids to headings, also supports {#custom-ids}
rehype-sort-attribute-values — sort attribute values
rehype-sort-attributes — sort attributes
rehype-sort-tailwind-classes — sort tailwind classes
rehype-starry-night — apply syntax highlighting to code with starry-night
rehype-svgo — optimize inline SVGs using SVGO
rehype-template — wrap content with template literal
rehype-toc — add a table of contents (TOC) to the page
rehype-truncate — truncate HTML while preserving its structure
rehype-twemojify — turn emoji shortcodes into twemoji
rehype-twoslash — process JavaScript and TypeScript code with twoslash and highlight it with starry-night
rehype-urls — rewrite URLs of href and src attributes
rehype-url-inspector — inspect, validate, or rewrite URLs anywhere in the document
rehype-video — improved video syntax: links to .mp4 and .mov turn into videos
rehype-webparser — less strict HTML parser
rehype-widont — prevent lines with single words
rehype-wrap — wrap selected elements with a given element
rehype-wrap-all — wrap all matching elements with a given element
rehype-wrap-sibling — wrap a selected element(s) and its sibling in a container element

List of utilities

See hast for a list of utilities that work with the syntax tree. See unist for other utilities which work with hast and other syntax trees too. Finally, see vfile for a list of utilities working with virtual files.

Use plugins

To use a plugin programmatically, call the use() function. To use plugin with rehype-cli, pass a --use flag or specify it in a configuration file.

Create plugins

To create a plugin, first read up on the concept of plugins. Then, read the guide on “Creating a plugin with unified”. Finally, take one of existing plugins, which looks similar to what you’re about to make, and work from there. If you get stuck, discussions is a good place to get help.

You should pick a name prefixed by 'rehype-' (such as rehype-format). Do not use the rehype- prefix if the thing you create doesn’t work with rehype().use(): it isn’t a “plugin” and will confuse users. If it works with hast, use 'hast-util-', if it works with any unist tree, use unist-util-, and if it works with virtual files, use vfile-.

Use default exports to expose plugins from your packages, add rehype-plugin keywords in package.json, add a rehype-plugin topic to your repo on GitHub, and create a pull request to add the plugin here on this page!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!