Slidev 如何用 code-group 分组切换多个代码块并自动匹配标题图标
【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev
在 Slidev 的幻灯片中，经常需要把同一操作的多种包管理器命令（npm / yarn / pnpm）并列展示。Code Groups 功能可以把多个代码块放进一个可点击切换的分组里：上方生成标签页，点击后只展示对应的代码块；标签名还会自动匹配一个图标，让标题更像文件名。
前提：启用 Comark 语法
Code Groups 依赖 Comark Syntax（旧称 MDC）。要在当前幻灯片的 frontmatter 中加入comark: true（详见 Comark 语法文档）：
--- comark: true ---用::code-group包裹多个代码块
在启用了 Comark 的幻灯片页面中，用::code-group…::包住若干带标题的代码块，每个代码块用[标题]指定标签名：
::code-group ```sh [npm] npm i @slidev/cli ``` ```sh [yarn] yarn add @slidev/cli ``` ```sh [pnpm] pnpm add @slidev/cli ``` ::渲染后，npm、yarn、pnpm会作为标签页显示在代码区上方，点击某个标签只显示对应代码块，其余块隐藏。每个块的[标题]就是标签文字，也是图标匹配的输入。
效果示意（文档中的示例截图）：
标题图标的自动匹配
分组标签会根据标题名自动匹配图标：
- 匹配方式是标题包含关键词，不区分大小写。例如标题里出现
npm、pnpm、vite就会对应到相应图标。 - 内置图标覆盖包管理器（pnpm、npm、yarn、bun、deno）、框架（vue、svelte、react、next、nuxt、solid、astro 等）、打包工具（rollup、webpack、vite、esbuild）、配置文件名（
package.json、tsconfig.json、.gitignore、.env等）以及常见文件扩展名（.ts、.js、.json、.md、.py、.yml等）。完整清单见 code-groups 文档。 - 要让内置图标真正显示出来，需要安装图标集合
@iconify-json/vscode-icons，因为内置图标大多引用该集合：
npm add @iconify-json/vscode-icons可选：为标题指定自定义图标
标题名不在内置清单中时，可以用~icon~语法在标题里直接指定任意 Iconify 集合中的图标，例如：
```js [npm ~i-uil:github~] console.log('Hello, GitHub!') ```标签会显示npm文字加 GitHub 图标，~...~部分不会出现在标签文字里。使用该图标需要两步：
- 安装对应的图标集合：
:::
npm add @iconify-json/uil（文档同时给出了 yarn / pnpm / bun 的等价命令。）
- 在
uno.config.ts的safelist中注册图标，否则它不会被打包进去：
import { defineConfig } from 'unocss' export default defineConfig({ safelist: [ 'i-uil:github', ], })验证方式与限制
- 验证：在预览页面确认代码区上方出现标签页、点击可切换代码块、标签前有图标。标题包含内置关键词（如
npm）时应显示对应文件图标；未安装图标集合时图标可能不显示，文字标签不受影响。 - 图标匹配只按标题做包含匹配，没有内置关键词且未写
~icon~时不显示图标。 - 自定义图标必须同时完成「安装集合」和「写入
uno.config.tssafelist」两步，缺任何一步图标都不会出现。 - 该功能只在
comark: true的页面中可用；未启用 Comark 时::code-group不会生成分组。 - 除 Code Groups 外，普通代码块和 Shiki Magic Move 也支持按标题名自动匹配图标（文档见 code-groups）。
【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
