unified

Project: mrazauskas/docusaurus-remark-plugin-tab-blocks

Package: docusaurus-remark-plugin-tab-blocks@1.2.0

  1. Dependents: 0
  2. Turn Docusaurus code blocks into tab blocks
  1. remark 199
  2. markdown 145
  3. plugin 138
  4. mdx 36
  5. code 7
  6. md 4
  7. docusaurus 2
  8. tab 2

docusaurus-remark-plugin-tab-blocks

Turn Docusaurus code blocks into tab blocks.

version license node-ci coverage

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

yarn add docusaurus-remark-plugin-tab-blocks
# or
npm install docusaurus-remark-plugin-tab-blocks

Usage

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

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          remarkPlugins: [require('docusaurus-remark-plugin-tab-blocks')],
        },
        docs: {
          remarkPlugins: [
            [
              require('docusaurus-remark-plugin-tab-blocks'),
              { labels: [['py', 'Python']] }, // optional plugin configuration
            ],
          ],
        },
        pages: {
          remarkPlugins: [require('docusaurus-remark-plugin-tab-blocks')],
        },
      },
    ],
  ],
};

API Reference

Plugin configuration

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

groupId

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

labels

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

sync

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.

span

Use span option to make a tab span 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:

Planned

This is a young library. More features are on the way:

If you have an idea or see a missing feature, just open an issue or send a PR.

License

MIT