a rehype micro-plugin that wraps an
element
in anotherelement
$ npm install rehype-wrap-element
$ yarn add rehype-wrap-element
$ pnpm add rehype-wrap-element
Example:
wrapping a
strong
element in adiv
element with a class namewrapper
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import {
rehypeWrapElement,
rehypeWrapElementOptions,
} from "rehype-wrap-element";
import rehypeStringify from "rehype-stringify";
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeWrapElement, {
target: "strong",
wrapper: { element: "div", className: "wrapper" },
} satisfies rehypeWrapElementOptions)
.use(rehypeStringify)
.process("**Hello, World!**");
Output:
<div class="wrapper">
<strong>Hello, World!</strong>
</div>
The rehypeWrapElement
function accepts the following options:
The target element to be wrapped. It can be either a string representing the element name or an object of type ElementOptions
.
The wrapper element that will be used to wrap the target element. It can be either a string representing the element name or an object of type ElementOptions
.
The ElementOptions
interface defines the options for wrapping an element. It has the following properties:
element
(required): The name of the element to be used as the wrapper.className
(optional): The class name to be added to the wrapper element.
The rehypeWrapElementOptions
type is the parameter type for the rehypeWrapElement
function. It has the following properties:
target
(required): The target element to be wrapped. It can be either a string representing the element name or an object of typeElementOptions
.wrapper
(required): The wrapper element that will be used to wrap the target element. It can be either a string representing the element name or an object of typeElementOptions
.
Contributions are welcome! Please feel free to submit a Pull Request.
- MIT license