rehype plugin to merge stacked codeblocks into one, tabbed instance.
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install --dev rehype-tabular-codeyarn:
yarn add -D rehype-tabular-codeWith the following markdown, in a file called codeblocks.md:
```typescript tab="Example 1"
const doesPinappleGoOnPizza = false;
```
```ts tab="Example 2"
const foo = "bar";
```
and this pipeline in a file called example.js:
import fs from 'fs'
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeTabularCode from 'rehype-tabular-code'
import rehypeStringify from 'rehype-stringify'
const mdbuf = fs.readFileSync('codeblocks.md')(async function main() {
const html = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeTabularCode, {
tagNames: {
contentContainer: 'section',
},
classNames: {
tab: 'code-tab',
},
})
.use(rehypeStringify)
.process(mdbuf)
console.log(html)
})()Running node example.js yields:
<div class="tabular-code">
<ul class="tabular-code-tabs">
<li class="code-tab active-tab">Example 1</li>
<li class="code-tab">Example 2</li>
</ul>
<section class="tabular-code-content">
<div>
<pre><code class="language-ts"> ... code content ... </code></pre>
</div>
<div class="hidden">
<pre><code class="language-ts"> ... code content ... </code></pre>
</div>
</section>
</div>This package exports no identifiers.
The default export is rehypeTabularCode.
Merge already parsed and stacked codeblocks into one tabbed container.
This option can be used in order override the default classnames set by the plugin.
/** Used to modify the classname of each part of the tabular codeblock */
classNames: {
/** The classname(s) used for the wrapping container that wraps all tabs and content
* @default "tabular-code"
*/
container?: string | string[]
/** The classname(s) used for the wrapping container that wraps all tabs
* @default "tabular-code-tabs"
*/
tabContainer?: string | string[]
/** The classname(s) used for the element containing the tab title
* @default "tabular-code-tab"
*/
tab?: string | string[]
/** The classname(s) used for the element containing the FIRST tab title
* @default "active-tab"
*/
activeTab?: string
/** The classname(s) used for the container that wraps all content
* @default "tabular-code-content"
*/
contentContainer?: string | string[]
/** The classname(s) used for the element that wraps each codeblock
* @default undefined
*/
content?: string | string[]
}This option can be used in order override the default tagnames set by the plugin.
/** Used to define the HTML elements to be used by each part of the tabular codeblock */
tagNames: {
/** The tagname used for the wrapping container that wraps all tabs and content
* @default "div"
*/
container?: string
/** The tagname used for the wrapping container that wraps all tabs
* @default "ul"
*/
tabContainer?: string
/** The tagname used for the element containing the tab title
* @default "li"
*/
tab?: string
/** The tagname used for the container that wraps all content
* @default "div"
*/
contentContainer?: string
/** The tagname used for the element that wraps each codeblock
* @default "div"
*/
content?: string
}Use of rehype-tabular-code can open you up to a
cross-site scripting (XSS) attack if you pass user provided content in
properties or content.
Always be wary of user input and use rehype-sanitize.
rehype-code-titles— Addids to headingsrehype-highlight— Syntax highlight code blocks
See contributing.md in rehypejs/.github for ways
to get started.
See support.md for ways to get help.
This project has a [code of conduct][coc]. By interacting with this repository, organization, or community you agree to abide by its terms.