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.
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-labelrehype-annotate— add W3C-style annotationsrehype-attr— new markdown syntax to add attributes.rehype-auto-ads— inserts an ad code for each specified number of paragraphsrehype-autolink-headings— add links to headingsrehype-callouts— render blockquote-based callouts (admonitions/alerts)rehype-citation— add citation and bibliography from bibtexrehype-class-names— add classes by selectorrehype-color-chips— add color chips to inline code blocks with color codesrehype-components— render components (custom elements)rehype-concat-css-style— concatenate<style>s togetherrehype-concat-javascript— concatenate<script>s togetherrehype-css-to-top— move<link>s to<head>rehype-document— wrap in a documentrehype-dom-parse— add support for parsing HTML input in browsersrehype-dom-stringify— add support for serializing HTML in browsersrehype-external-links— add rel (and target) to external linksrehype-extract-meta— extract meta data from an HTML documentrehype-figure— support figure and caption from imagesrehype-format— format HTMLrehype-highlight— syntax highlight code blocks with Highlight.js vialowlightrehype-highlight-code-block— syntax highlight code blocks with any function you providerehype-highlight-code-lines— add line numbers to code blocks; allow highlighting of desired code linesrehype-infer-description-meta— infer file metadata from the contents of the documentrehype-infer-reading-time-meta— infer reading time as file metadata from the documentrehype-infer-title-meta— infer file metadata from the main title of a documentrehype-inline— inline JS, CSS, and image filesrehype-inline-svg— inline and optimize SVG imagesrehype-ignore— ignore content display via HTML comments.rehype-jargon— inserts definitions for jargon termsrehype-javascript-to-bottom— move<script>s to the end of<body>rehype-join-line— resolve line breaks in Chinese paragraphsrehype-katex— render math with KaTeXrehype-katex-notranslate— addtranslate="no"to KaTeX blocks to prevent translationrehype-lodash-template— replace template strings with values from the dictionaryrehype-mathjax— render math with MathJaxrehype-mathml— render math with MathMLrehype-mermaidjs— render mermaid diagramsrehype-meta— add metadata to the head of a documentrehype-minify— minify HTMLrehype-minify-attribute-whitespace— minify whitespace in attributesrehype-minify-css-style— minify CSS in<style>srehype-minify-enumerated-attribute— minify enumerated attributesrehype-minify-event-handler— minify event handler attributesrehype-minify-javascript-script— minify JS in<script>srehype-minify-javascript-url— minifyjavascript:URLsrehype-minify-json-script— minify JSON in<script>srehype-minify-language— minifylangattributesrehype-minify-media-attribute— minifymediaattributesrehype-minify-meta-color— minifycontentof theme color<meta>srehype-minify-meta-content— minifycontenton<meta>srehype-minify-style-attribute— minifystyleattributesrehype-minify-url— minify URL attributesrehype-minify-whitespace— minify whitespace between elementsrehype-normalize-attribute-value-case— normalize casing of attribute valuesrehype-partials— partials support for rehyperehype-picture— wrap images in<picture>srehype-postcss— run PostCSS on<style>nodes and elements with astyleattributerehype-prevent-favicon-request— prevent a request by setting an emptyfavicon.icorehype-prism— syntax highlighting with Prism viarefractorrehype-prism-plus— syntax highlighting with Prism viarefractorwith extrasrehype-raw— parse the tree again (and raw nodes)rehype-react— compile to Reactrehype-remark— remark supportrehype-remove-comments— remove commentsrehype-remove-duplicate-attribute-values— remove duplicate attribute valuesrehype-remove-empty-attribute— remove empty attributesrehype-remove-external-script-content— remove content on<script>s w/srcrehype-remove-imagesrehype-remove-meta-http-equiv— replace certainhttp-equivs with shorter alternativesrehype-remove-script-type-javascript— removetypeandlanguageon JS<script>srehype-remove-style-type-css— removetypeon CSS<style>s and<link>srehype-remove-unused-css— remove unused cssrehype-resolution— inject resolutionsrcsetinto imagesrehype-retext— retext supportrehype-rewrite— rewrite element with rehyperehype-sanitize— sanitize HTMLrehype-scroll-to-top— customizable “Scroll to Top” and “Scroll to Bottom” linksrehype-section— wrap headings and their contents into nested<section>elementsrehype-sectionize— wrap headings and their contents into nested<section>elements, with attributesrehype-semantic-blockquotes— new blockquote syntax to mention/cite sources in a semantically correct wayrehype-semantic-images— enrich HTML images with semantic elements and customizable featuresrehype-shift-heading— change the rank of headingsrehype-shiki— syntax highlight code blocks with Shikirehype-slots— replace slot elements with injected contentrehype-slug— addids to headingsrehype-slug-custom-id— addids to headings, also supports{#custom-ids}rehype-sort-attribute-values— sort attribute valuesrehype-sort-attributes— sort attributesrehype-sort-tailwind-classes— sort tailwind classesrehype-starry-night— apply syntax highlighting to code withstarry-nightrehype-svgo— optimize inline SVGs using SVGOrehype-template— wrap content with template literalrehype-toc— add a table of contents (TOC) to the pagerehype-truncate— truncate HTML while preserving its structurerehype-twemojify— turn emoji shortcodes into twemojirehype-twoslash— process JavaScript and TypeScript code withtwoslashand highlight it withstarry-nightrehype-urls— rewrite URLs ofhrefandsrcattributesrehype-url-inspector— inspect, validate, or rewrite URLs anywhere in the documentrehype-video— improved video syntax: links to.mp4and.movturn into videosrehype-webparser— less strict HTML parserrehype-widont— prevent lines with single wordsrehype-wrap— wrap selected elements with a given elementrehype-wrap-all— wrap all matching elements with a given element
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.
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.
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!