Package Exports

rehype-wrapper
rehype-wrapper/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rehype-wrapper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rehype-wrapper

A simple rehype plugin that wraps the entire Markdown HTML output in a new container element. This is useful when you need to add custom styling, JavaScript functionality, or other attributes to the entire Markdown content as a unit.

Installation

npm install rehype-wrapper
# or
yarn add rehype-wrapper
# or
pnpm add rehype-wrapper

Usage

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import rehypeWrapper from 'rehype-wrapper';

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeWrapper, {
    className: 'my-content',
    tagName: 'article',
    attributes: {
      id: 'content-wrapper',
      'data-generated': 'true'
    }
  })
  .use(rehypeStringify);

const markdown = '# Hello\n\nThis is a paragraph.';

processor.process(markdown)
  .then((file) => {
    console.log(file.toString());
    // <article class="my-content" id="content-wrapper" data-generated="true">
    //   <h1>Hello</h1>
    //   <p>This is a paragraph.</p>
    // </article>
  });

Options

`className`

Type: string
Default: 'markdown'

The CSS class name to apply to the wrapper element.

`tagName`

Type: string
Default: 'div'

The HTML tag to use for the wrapper element. Can be any valid HTML element like 'div', 'section', 'article', 'main', etc.

`attributes`

Type: Record<string, string | number | boolean>
Default: {}

Additional HTML attributes to add to the wrapper element.

Examples

Basic usage with default options

.use(rehypeWrapper)

Output:

<div class="markdown">
  <!-- Markdown content -->
</div>

Using a semantic HTML tag

.use(rehypeWrapper, { tagName: 'section' })

Output:

<section class="markdown">
  <!-- Markdown content -->
</section>

Blog article with semantic HTML

.use(rehypeWrapper, {
  tagName: 'article',
  className: 'blog-post',
  attributes: {
    'itemscope': true,
    'itemtype': 'http://schema.org/BlogPosting'
  }
})

Output:

<article class="blog-post" itemscope itemtype="http://schema.org/BlogPosting">
  <!-- Markdown content -->
</article>

Integration with frameworks

Next.js with MDX

// next.config.js
import rehypeWrapper from 'rehype-wrapper';

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
  
  experimental: {
    mdxRs: true,
  },
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [
      [rehypeWrapper, { 
        tagName: 'article',
        className: 'prose lg:prose-xl dark:prose-invert' 
      }]
    ],
  },
});

export default withMDX(nextConfig);

Gatsby

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        rehypePlugins: [
          [require('rehype-wrapper'), { 
            tagName: 'main',
            className: 'article-content' 
          }]
        ],
      },
    },
  ],
};

License

MIT