Rehype-tabular-code NPM

rehype-tabular-code

rehype plugin to merge stacked codeblocks into one, tabbed instance.

Codeblock with tabs

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm install --dev rehype-tabular-code

yarn:

yarn add -D rehype-tabular-code

Use

With 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>

API

This package exports no identifiers. The default export is rehypeTabularCode.

`unified().use(rehypeTabularCode[, options])`

Merge already parsed and stacked codeblocks into one tabbed container.

`options`

`options.classNames`

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[]
}

`options.tagNames`

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
}