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":"/guide/code/group/","title":"代码分组 | 指南","lang":"zh-CN","frontmatter":{"title":"代码分组","icon":"fluent:group-list-20-filled","createTime":"2024/04/04 10:36:59","permalink":"/guide/code/group/","description":"概述代码组（Code Tabs）是主题中用于并排展示多个相关代码片段的强大功能。通过标签页形式组织代码，您可以清晰对比不同技术栈、配置方案或语言版本的实现差异。基础语法多代码块分组使用代码组语法将多个代码块组织在同一标签容器中：输入：输出：设置默认激活标签通过 @tab:active 语法指定默认显示的代码标签：输入：输出：标签...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"代码分组\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2026-03-08T13:55:27.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/code/group/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"代码分组"}],["meta",{"property":"og:description","content":"概述代码组（Code Tabs）是主题中用于并排展示多个相关代码片段的强大功能。通过标签页形式组织代码，您可以清晰对比不同技术栈、配置方案或语言版本的实现差异。基础语法多代码块分组使用代码组语法将多个代码块组织在同一标签容器中：输入：输出：设置默认激活标签通过 @tab:active 语法指定默认显示的代码标签：输入：输出：标签..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2026-03-08T13:55:27.000Z"}],["meta",{"property":"article:modified_time","content":"2026-03-08T13:55:27.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/code/group/"}]]},"readingTime":{"minutes":2.93,"words":880},"git":{"createdTime":1759849989000,"updatedTime":1772978127000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":2,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"97a5ba20c3eb976864d8a9ec7342a061bb73c03b","time":1772978127000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: fix typo"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"}]},"autoDesc":true,"filePathRelative":"guide/code/code-tabs.md","headers":[],"bulletin":false}`),u={name:`code-tabs.md`},d={id:`标签图标支持`,tabindex:`-1`},f={class:`header-anchor`,href:`#标签图标支持`};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(`

概述

代码组（Code Tabs）是主题中用于并排展示多个相关代码片段的强大功能。通过标签页形式组织代码，您可以清晰对比不同技术栈、配置方案或语言版本的实现差异。

基础语法

多代码块分组

使用代码组语法将多个代码块组织在同一标签容器中：

输入：

::: 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
\`\`\`
:::

输出：

`,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(`

设置默认激活标签

通过 @tab:active 语法指定默认显示的代码标签：

输入：

::: 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
\`\`\`
:::

输出：

`,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(`标签图标支持 `,-1),r(v,{type:`tip`,text:`v1.0.0-rc.103 +`})])])]),l[17]||=o(`

主题为代码组标签提供智能图标显示功能，基于标签标题自动匹配相关技术图标。

自动图标识别

主题内置了主流技术和语言的图标映射：

输入：

::: code-tabs
@tab pnpm

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

@tab yarn

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

@tab npm

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

:::

输出：

`,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(`

支持的图标类别

主题默认适配以下技术栈的图标：

运行环境：Node.js、Deno、Bun
包管理器：pnpm、yarn、npm
前端框架：Vue、React、Angular、Svelte、Solid、Next.js、Nuxt
编程语言：TypeScript、JavaScript、C、C++、Java、Python、Rust、Kotlin、Swift、Go

图标支持反馈

如果您使用的技术栈未能正确显示图标，欢迎提交 issue 告知我们，我们将尽快添加相关图标支持。

图标配置选项

通过 markdown.codeTabs 配置项精确控制图标显示行为：

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeTabs: {
        icon: true, // 启用图标功能
      }
    },
  })
})

配置接口定义：

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

配置示例

禁用所有图标：

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

仅显示指定技术栈图标：

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeTabs: {
        icon: {
          named: ['pnpm', 'yarn', 'npm'], // 仅匹配这些技术名称
          extensions: false // 禁用文件扩展名匹配
        }
      }
    }
  })
})

配置说明：

named：精确匹配技术名称（如 pnpm、vue、react）
extensions：匹配文件扩展名（如 .ts、.js、.py）
设置为 false 禁用对应匹配方式
空数组使用默认匹配规则
字符串匹配区分大小写

性能优化说明

图标体积优化

您无需担心图标资源对构建体积的影响。代码组图标基于 Iconify 体系实现，配合本地安装的 @iconify/json 包，主题会自动：

解析并提取实际使用的图标数据
生成优化的本地图标资源
确保相同图标仅打包一次

每个彩色图标的平均体积仅为 1-2KB，即使大量使用不同图标，对最终构建体积的影响也微乎其微。

通过合理的配置和使用，代码组功能能够显著提升技术文档的可读性和用户体验，帮助读者更高效地理解不同技术方案间的差异。

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