Вкладки кода

Меньше 1 минутыMarkdownВкладки кодаMarkdown

Тема предоставляет вам поддержку вкладок кода.

Конфиг

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        codetabs: true,
      },
    },
  }),
});







 
 
 



Использование

Это то же самое, что и функция вкладок, но она создана специально для блоков кода.

Внутри вкладок кода допускается только ограждение кода после маркера @tab, остальное содержимое уценки будет игнорироваться.

Демо

Установите тему VuePress Theme Hope:

npm i -D vuepress-theme-hope

Установите плагин VuePress Markdown Enhance:

npm i -D vuepress-plugin-md-enhance@next
Code
Install 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
```

:::

Install 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
```

:::