Skip to main content

Code Tabs

Groups sequences of code section into a single tabbed element, with optional CodeSandbox button.

Usage​

Place code section that need to be group in a sequence, and add tabs to the meta of the first code section.

These snippets should be grouped in tabs.

```js tabs
const add = (a, b) => a + b;
```

```ts
const add = (a: number, b: number) => a + b;
```
http://localhost:3000

These snippets should be grouped in tabs.

const add = (a, b) => a + b;

Grouping​

Any paragraph will break the sequence and start a new group. If you provide a string for tabs (tabs=group), it will be used as a custom group sync id.

These snippets should be grouped in tabs.

```js tabs=group
const add = (a, b) => a + b;
```

```ts
const add = (a: number, b: number) => a + b;
```

Start a new group now.

```js tabs=group
const sub = (a, b) => a - b;
```

```ts
const sub = (a: number, b: number) => a - b;
```
http://localhost:3000

These snippets should be grouped in tabs.

const add = (a, b) => a + b;

Start a new group now.

const sub = (a, b) => a - b;

Lazy​

By default, all tabs are rendered to help with search engine. You can add the lazy meta to change this behavior.

```js tabs lazy
const add = (a, b) => a + b;
```

```ts
const add = (a: number, b: number) => a + b;
```
http://localhost:3000
const add = (a, b) => a + b;

CodeSandbox button​

Display a CodeSandbox button that create and opens a new project on codesandbox.io with the files. By default, creates a node 18 sandbox.

```js tabs codesandbox title="add.js"
const add = (a, b) => a + b;
```

```js title="sub.js"
const sub = (a: number, b: number) => a - b;
```
http://localhost:3000
add.js
const add = (a, b) => a + b;

Configuration​

This plugin is automatically injected by the rise4fun plugins.

Language titles​

If you are providing new language code that are not covered by prims, you can provide map of names.

docusaurus.config.js
const config = configure({
    ...
}, {
    ...
    codeTabs: {
        languages: {
            yacl: "Yet another cool language"
        }
    }
})
vir y = 0

CodeSandbox​

Make sure to configure the CodeSandbox button plugin.