markdown-tab

@vuepress/plugin-markdown-tab

Add tabs and code tabs to your VuePress site.

This plugin has been integrated into the default theme.

Usage

npm i -D @vuepress/plugin-markdown-tab@next
import { markdownTabPlugin } from '@vuepress/plugin-markdown-tab'

export default {
  plugins: [
    markdownTabPlugin({
      // Enable code tabs
      codeTabs: true,
      // Enable tabs
      tabs: true,
    }),
  ],
}

Tabs Guide

You need to wrap your tabs in tabs container.

You can add an id suffix in tabs container, which will be used as tab id. All tabs with same id will share same switch event.

<!-- 👇 here, fruit will be used as id, it's optional -->

::: tabs#fruit

<!-- tabs content -->

:::

Inside this container, you should use @tab marker to mark and separate tab contents.

Behind @tab marker, you can add text :active to activate the tab by default, and the text will be resolved as tab title.

::: tabs

@tab title 1

<!-- tab 1 content -->

@tab title 2

<!-- tab 2 content -->

<!-- 👇 tab 3 will be activated by default -->

@tab:active title 3

<!-- tab 3 content -->

:::

By default, the title will be used as value of tab, but you can override it using id suffix.

::: tabs

<!-- 👇 here, tab 1's title "title 1" will be used as value. -->

@tab title 1

<!-- tab 1 content -->

<!-- 👇 here, tab 2's title will be "title 2", and it will bind with the value "value2" -->

@tab title 2#value2

<!-- tab 2 content -->

:::

You can use Vue syntax and components in each tab, and you can access value and isActive, indicating the tab's binding value and whether the tab is active.

Switching together and persisting choice

If you want to make some tab groups switch together, you can use tab ids to bind them. Also, each tab id's choice will be stored and persisted.

Here is an example:

Choose a package manager:

npm

npm should be installed with Node.js.

Install vuepress:

Using npm
npm i -D vuepress
Code
Choose a package manager:

::: tabs#shell

@tab npm

npm should be installed with Node.js.

@tab pnpm

```bash
corepack enable
corepack use pnpm@latest
```

:::

Install `vuepress`:

::: tabs#shell

@tab Using npm#npm

```bash
npm i -D vuepress
```

@tab Using pnpm#pnpm

```bash
pnpm add -D vuepress
```

:::

Code Tabs Guide

This is the same as tabs, but it's special built for code blocks.

Only the first code fence after @tab marker is rendered inside code tabs, other Markdown content will be ignored.

Demo

A tab of fruit:

apple

Apple

Another tab of fruit:

apple

Apple

A tab of fruit without id:

apple

Apple

Code
A tab of fruit:

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

Another tab of fruit:

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

A tab of fruit without id:

::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

Install VuePress:

npm
npm i -D vuepress

Install VuePress Tabs Plugin:

npm
npm i -D @vuepress/plugin-markdown-tab
Code
Install VuePress:

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D vuepress
```

@tab yarn

```bash
yarn add -D vuepress
```

@tab:active npm

```bash
npm i -D vuepress
```

:::

Install VuePress Tabs Plugin:

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D @vuepress/plugin-markdown-tab
```

@tab yarn

```bash
yarn add -D @vuepress/plugin-markdown-tab
```

@tab:active npm

```bash
npm i -D @vuepress/plugin-markdown-tab
```

:::

Options

tabs

  • Type: boolean
  • Details: Whether enable tabs.

codeTabs

  • Type: boolean
  • Details: Whether enable code tabs.

Styles

You can customize the style via CSS variables:

:root {
  --code-tabs-c-text: var(--code-c-text);
  --code-tabs-c-bg: var(--code-c-highlight-bg);
  --code-tabs-c-hover: var(--code-c-bg, var(--vp-c-bg-alt));
  --tab-c-bg: var(--vp-c-bg);
  --tab-c-nav: var(--vp-c-text);
  --tab-c-bg-nav: var(--vp-c-grey-bg);
  --tab-c-bg-nav-hover: var(--vp-c-control-hover);
}