跳至主要內容

代码块分组

小于 1 分钟

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

配置

import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

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






 



使用

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

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

演示

安装 VuePress Theme Hope:

npm
npm i -D vuepress-theme-hope

安装 VuePress Plugin Markdown Enhance:

npm
npm i -D vuepress-plugin-md-enhance
安装 VuePress Theme Hope:

::: code-tabs#shell

@tab pnpm

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

@tab yarn

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

@tab:active npm

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

:::

安装 VuePress Plugin Markdown Enhance:

::: code-tabs#shell

@tab pnpm

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

@tab yarn

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

@tab:active npm

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

:::