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


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.


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


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

module.exports = {
  presets: [
        blog: {
          remarkPlugins: [require('docusaurus-remark-plugin-tab-blocks')],
        docs: {
          remarkPlugins: [
              { 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.


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


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


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.


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:


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.