Markdown code-tabs 代码块分组切换用法

插件为你带来了代码块分组支持。

配置

// .vuepress/config.ts
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用代码块分组
      codetabs: true,
    }),
  ],
};

// .vuepress/config.js
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用代码块分组
      codetabs: true,
    }),
  ],
};

使用

此功能选项卡功能相同，但它是专门为代码块构建的。

代码选项卡只会渲染 @tab 标记后的代码块，其他 Markdown 内容将被忽略。

演示

安装 VuePress Theme Hope:

pnpm add -D vuepress-theme-hope@next

yarn add -D vuepress-theme-hope@next

npm i -D vuepress-theme-hope@next

安装 VuePress Plugin Markdown Enhance:

pnpm add -D vuepress-plugin-md-enhance@next

yarn add -D vuepress-plugin-md-enhance@next

npm i -D vuepress-plugin-md-enhance@next

代码

安装 VuePress Theme Hope:

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D vuepress-theme-hope@next
```

@tab yarn

```bash
yarn add -D vuepress-theme-hope@next
```

@tab:active npm

```bash
npm i -D vuepress-theme-hope@next
```

:::

安装 VuePress Plugin Markdown Enhance:

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D vuepress-plugin-md-enhance@next
```

@tab yarn

```bash
yarn add -D vuepress-plugin-md-enhance@next
```

@tab:active npm

```bash
npm i -D vuepress-plugin-md-enhance@next
```

:::