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），仅供参考