docusaurus-remark-plugin-tab-blocks
TypeScript icon, indicating that this package has built-in type declarations

3.1.0 • Public • Published

docusaurus-remark-plugin-tab-blocks

version license packagephobia coverage

Turn Docusaurus code blocks into tab blocks.


This Docusaurus plugin transforms markdown code blocks into tabs. Just add the tab key to the language meta string:

```js tab
console.log("Hello JavaScript tab!");
```

```ts tab
console.log("Ahoy TypeScript tab!");
```

And you have:

[!NOTE]

A Docusaurus theme with the Tabs and TabItems components is required.

Install

npm add docusaurus-remark-plugin-tab-blocks

[!NOTE]

Current version of the plugin only works with Docusaurus 3. For Docusaurus 2, you should install docusaurus-remark-plugin-tab-blocks@1.3.1.

Usage

Add the plugin to the remarkPlugins list of your Docusaurus configuration:

import tabBlocks from "docusaurus-remark-plugin-tab-blocks";

export default {
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        blog: {
          remarkPlugins: [tabBlocks],
        },
        docs: {
          remarkPlugins: [
            [
              tabBlocks,
              // optional plugin configuration
              {
                labels: [
                  ["json", "JSON"],
                  ["jsx", "JSX"],
                  ["tsx", "TSX"],
                ],
              },
            ],
          ],
        },
        pages: {
          remarkPlugins: [tabBlocks],
        },
      },
    ],
  ],
};

API Reference

Plugin configuration

Configuration options can be passed to the plugin using the tuple form. See usage example above.

groupId

  • Type: string
  • Default: "code-examples"

The groupId property for all instances of Tabs component created by this plugin. Applicable only if sync option is set to true.

labels

  • Type: Array<[string, string]>
  • Default: [["js", "JavaScript"], ["ts", "TypeScript"]]

List with tuples with code block language attribute and tab label text.

sync

  • Type: boolean
  • Default: true

Whether tab choices should be synced between all tabs created by this plugin.

tab options

Each tab can be customized separately by assign a configuration object to the tab key. Keep in mind that the object must be parsable JSON.

label

  • Type: string

Sets custom tab label text.

```bash tab={"label":"npm"}
npm install docusaurus-remark-plugin-tab-blocks
```

```bash tab={"label":"yarn"}
yarn add docusaurus-remark-plugin-tab-blocks
```

span

  • Type: number

Makes a single tab wrap two or more code blocks.

```js tab={"span":2} title="SomeClass.js"
module.exports = class SomeClass {
  method(a, b) {}
};
```

```js title="SomeClass.test.js"
const SomeClass = require("./SomeClass");

// this and previous code blocks live in a single tab
```

```ts tab={"span":2} title="SomeClass.ts"
export class SomeClass {
  method(a: string, b: string): void {}
}
```

```ts title="SomeClass.test.ts"
import { SomeClass } from "./SomeClass";

// this and previous code blocks live in a single tab
```

The example above will be rendered like this:

License

MIT

Package Sidebar

Install

npm i docusaurus-remark-plugin-tab-blocks

Weekly Downloads

427

Version

3.1.0

License

MIT

Unpacked Size

11.7 kB

Total Files

5

Last publish

Collaborators

  • mrazauskas