Install

npm install rehype-wrap-all

yarn add rehype-wrap-all

rehype-wrap-all

Wrap matching elements with a given element

Install

 npm i -S rehype-wrap-all

Usage

 const wrap = require('rehype-wrap-all')
const rehype = require('rehype')

rehype()
  .use(wrap, /* options (object or array) */)
  .process(/* html string */)
  .then(/* vfile */)
  .catch(/* handle any errors */)

Note that you can use an array of options if you want to wrap multiple elements with different wrappers

Options

`wrap.selector`

`string`

Select elements to be wrapped. Expects a string selector that can be passed to hast-util-select (supported selectors).

`wrap.wrapper`

`string`

Element to wrap around wrap.selector. Expects a string selector that can be parsed into html using hast-util-parse-selector (see readme)

Example

 # dependencies

npm i unified to-vfile remark-parse remark-rehype vfile-reporter rehype-document rehype-stringify rehype-wrap-all

 # example.md

table 1

| row | row | row |
| --- | --- | --- |

table 2

| row | row | row |
| --- | --- | --- |

 /* example.js */

'use strict'

const unified = require('unified')
const toVfile = require('to-vfile')
const remarkParse = require('remark-parse')
const remarkRehype = require('remark-rehype')
const vfileReporter = require('vfile-reporter')
const rehypeDocument = require('rehype-document')
const rehypeStringify = require('rehype-stringify')
const rehypeWrap = require('rehype-wrap-all')

const markdown = toVfile.readSync('./example.md')


unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeDocument)
  .use(rehypeWrap, {selector:'table', wrapper: 'div.responsive-table'})
  .use(rehypeStringify)
  .process(markdown, (err, file) => {
    console.error(vfileReporter(err ||file))
    console.log(String(file))
  })

 <!—- output -—>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p>table 1</p>
  <div class="responsive-table">
    <table>
      <tr>
        <td>row</td><td>row</td><td>row</td>
      </tr>
    </table>
  </div>
  <p>table 1</p>
  <div class="responsive-table">
    <table>
      <tr>
        <td>row</td><td>row</td><td>row</td>
      </tr>
    </table>
  </div>
</body>
</html>