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.
npm add docusaurus-remark-plugin-tab-blocksNote
Current version of the plugin only works with Docusaurus 3. For Docusaurus 2, you should install docusaurus-remark-plugin-tab-blocks@1.3.1.
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],
},
},
],
],
};Configuration options can be passed to the plugin using the tuple form. See usage example above.
- 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.
- Type:
Array<[string, string]> - Default:
[["js", "JavaScript"], ["ts", "TypeScript"]]
List with tuples with code block language attribute and tab label text.
- Type:
boolean - Default:
true
Whether tab choices should be synced between all tabs created by this plugin.
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.
- 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
```- 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:
