import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/en/guide/code/group/","title":"Code Grouping | Guide","lang":"en-US","frontmatter":{"title":"Code Grouping","icon":"fluent:group-list-20-filled","createTime":"2025/10/08 10:36:59","permalink":"/en/guide/code/group/","description":"Overview Code Tabs are a powerful feature in the theme for displaying multiple related code snippets side by side. By organizing code in tabbed interfaces, you can clearly compa...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Code Grouping\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/code/group/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Code Grouping"}],["meta",{"property":"og:description","content":"Overview Code Tabs are a powerful feature in the theme for displaying multiple related code snippets side by side. By organizing code in tabbed interfaces, you can clearly compa..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/code/group/"}]]},"readingTime":{"minutes":2.16,"words":649},"git":{"createdTime":1759995965000,"updatedTime":1759995965000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/code/code-tabs.md","headers":[],"bulletin":false}`),u={name:`code-tabs.md`},d={id:`tab-icon-support`,tabindex:`-1`},f={class:`header-anchor`,href:`#tab-icon-support`};function p(c,l,u,p,m,h){let g=t(`VPIcon`),_=t(`CodeTabs`,!0),v=t(`Badge`);return n(),i(`div`,null,[l[15]||=o(`

Overview

Code Tabs are a powerful feature in the theme for displaying multiple related code snippets side by side. By organizing code in tabbed interfaces, you can clearly compare implementation differences across various tech stacks, configuration approaches, or language versions.

Basic Syntax

Multiple Code Block Grouping

Use code tab syntax to organize multiple code blocks within the same tab container:

Input:

::: code-tabs
@tab config.js
\`\`\`js
/**
 * @type {import('vuepress').UserConfig}
 */
const config = {
  // ..
}

export default config
\`\`\`

@tab config.ts
\`\`\`ts
import type { UserConfig } from 'vuepress'

const config: UserConfig = {
  // ..
}

export default config
\`\`\`
:::

Output:

`,8),r(_,{id:`22`,data:[{id:`config.js`},{id:`config.ts`}]},{title0:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`vscode-icons:file-type-js`}),l[0]||=s(`span`,null,`config.js`,-1)]),title1:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[1]||=s(`span`,null,`config.ts`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[2]||=[s(`div`,{class:`language-js`,"data-highlighter":`shiki`,"data-ext":`js`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-js`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},`/**`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` * `),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`@`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`type`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#2E8F82`,"--shiki-dark":`#5DA994`}},`import('vuepress').UserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` */`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` config`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` // ..`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),a(` `),s(`span`,{class:`line`}),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` config`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[3]||=[s(`div`,{class:`language-ts`,"data-highlighter":`shiki`,"data-ext":`ts`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-ts`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` type`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` UserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vuepress`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),a(` `),s(`span`,{class:`line`}),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`config`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: `),s(`span`,{style:{"--shiki-light":`#2E8F82`,"--shiki-dark":`#5DA994`}},`UserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` // ..`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),a(` `),s(`span`,{class:`line`}),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` config`)])])])],-1)]]),_:1}),l[16]||=o(`

Setting Default Active Tab

Specify the default displayed code tab using the @tab:active syntax:

Input:

::: code-tabs
@tab config.js
\`\`\`js
/**
 * @type {import('vuepress').UserConfig}
 */
const config = {
  // ..
}

export default config
\`\`\`

@tab:active config.ts 
\`\`\`ts
import type { UserConfig } from 'vuepress'

const config: UserConfig = {
  // ..
}

export default config
\`\`\`
:::

Output:

`,5),r(_,{id:`43`,data:[{id:`config.js`},{id:`config.ts`}],active:1},{title0:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`vscode-icons:file-type-js`}),l[4]||=s(`span`,null,`config.js`,-1)]),title1:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[5]||=s(`span`,null,`config.ts`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[6]||=[s(`div`,{class:`language-js`,"data-highlighter":`shiki`,"data-ext":`js`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-js`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},`/**`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` * `),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`@`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`type`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#2E8F82`,"--shiki-dark":`#5DA994`}},`import('vuepress').UserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` */`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` config`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` // ..`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),a(` `),s(`span`,{class:`line`}),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` config`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[7]||=[s(`div`,{class:`language-ts`,"data-highlighter":`shiki`,"data-ext":`ts`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-ts`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` type`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` UserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vuepress`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),a(` `),s(`span`,{class:`line`}),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`config`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: `),s(`span`,{style:{"--shiki-light":`#2E8F82`,"--shiki-dark":`#5DA994`}},`UserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},` // ..`)]),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),a(` `),s(`span`,{class:`line`}),a(` `),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` config`)])])])],-1)]]),_:1}),s(`h2`,d,[s(`a`,f,[s(`span`,null,[l[8]||=a(`Tab Icon Support `,-1),r(v,{type:`tip`,text:`v1.0.0-rc.103 +`})])])]),l[17]||=o(`

The theme provides intelligent icon display functionality for code tab labels, automatically matching relevant technology icons based on tab titles.

Automatic Icon Recognition

The theme includes built-in icon mappings for mainstream technologies and languages:

Input:

::: code-tabs
@tab pnpm

\`\`\`sh
pnpm i
\`\`\`

@tab yarn

\`\`\`sh
yarn
\`\`\`

@tab npm

\`\`\`sh
npm install
\`\`\`

:::

Output:

`,6),r(_,{id:`70`,data:[{id:`pnpm`},{id:`yarn`},{id:`npm`}]},{title0:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`}),l[9]||=s(`span`,null,`pnpm`,-1)]),title1:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`vscode-icons:file-type-yarn`}),l[10]||=s(`span`,null,`yarn`,-1)]),title2:e(({value:e,isActive:t})=>[r(g,{provider:`iconify`,name:`logos:npm-icon`}),l[11]||=s(`span`,null,`npm`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[12]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`pnpm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` i`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[13]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`yarn`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...l[14]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`npm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` install`)])])])],-1)]]),_:1}),l[18]||=o(`

Supported Icon Categories

The theme automatically adapts icons for the following tech stacks:

Runtime Environments: Node.js, Deno, Bun
Package Managers: pnpm, yarn, npm
Frontend Frameworks: Vue, React, Angular, Svelte, Solid, Next.js, Nuxt
Programming Languages: TypeScript, JavaScript, C, C++, Java, Python, Rust, Kotlin, Swift, Go

Icon Support Feedback

If the technology stack you're using doesn't display icons correctly, please submit an issue to let us know, and we'll add the relevant icon support as soon as possible.

Icon Configuration Options

Precisely control icon display behavior through the markdown.codeTabs configuration option:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeTabs: {
        icon: true, // Enable icon functionality
      }
    },
  })
})

Configuration interface definition:

export interface CodeTabsOptions {
  icon?: boolean | {
    named?: false | string[]
    extensions?: false | string[]
  }
}

Configuration Examples

Disable All Icons:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeTabs: {
        icon: false
      }
    }
  })
})

Display Only Specified Technology Stack Icons:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeTabs: {
        icon: {
          named: ['pnpm', 'yarn', 'npm'], // Only match these technology names
          extensions: false // Disable file extension matching
        }
      }
    }
  })
})

Configuration Notes:

named: Exact match for technology names (e.g., pnpm, vue, react)
extensions: Match file extensions (e.g., .ts, .js, .py)
Set to false to disable the corresponding matching method
Empty arrays use default matching rules
String matching is case-sensitive

Performance Optimization Notes

Icon Volume Optimization

You don't need to worry about the impact of icon resources on build size. Code tab icons are implemented based on the Iconify system, and with the locally installed @iconify/json package, the theme automatically:

Parses and extracts actually used icon data
Generates optimized local icon resources
Ensures the same icon is bundled only once

The average size of each colored icon is only 1-2KB. Even with extensive use of different icons, the impact on the final build size is minimal.

Through reasonable configuration and usage, the code tabs feature can significantly improve the readability of technical documentation and user experience, helping readers more efficiently understand differences between various technical solutions.

`,19)])}var m=c(u,[[`render`,p]]);export{l as _pageData,m as default};