docusaurus-remark-plugin-tab-blocks

Turn Docusaurus code blocks into tab blocks

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
docusaurus-remark-plugin-tab-blocks
2113.1.0a month ago2 years agoMinified + gzip package size for docusaurus-remark-plugin-tab-blocks in KB

Readme

docusaurus-remark-plugin-tab-blocks
!versionversion-badgeversion-url !licenselicense-badgelicense-url !packagephobiapackagephobia-badgepackagephobia-url !coveragecoverage-badgecoverage-url
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:
````md ```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.
````md ```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.
````md ```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

MITlicense-url