docusaurus-remark-plugin-tab-blocks
!versionversion-badgeversion-url
!licenselicense-badgelicense-url
!packagephobiapackagephobia-badgepackagephobia-url
!coveragecoverage-badgecoverage-urlTurn 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 theTabs
andTabItems
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 installdocusaurus-remark-plugin-tab-blocks@1.3.1
.
Usage
Add the plugin to theremarkPlugins
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: