SuperAPI AI 工具集

slidev-code-blocks

编程与开发

查看项目

更新于 10-15 23:24

技能介绍

用途:在 Slidev 演示中展示代码,覆盖 Shiki 语法高亮、行高亮、代码分组、外部代码片段导入等场景。适合展示代码片段、逐步揭示代码、对比代码差异以及从外部文件引入代码。

主要能力:基础代码块支持 100 多种语言;行号可用 {lines:true} 单独启用或在 frontmatter 中设置 lineNumbers: true,也可用 {startLine:5} 指定起始行。行高亮支持指定行或范围(如 {2,3}、{1-3,5}),并支持点击逐步显示(如 {1|2-3|5})与最终状态。代码块选项包括 maxHeight、wrap 以及组合选项(如 {2-4|6-8}{lines:true,startLine:10,maxHeight:'300px'})。主题可在 setup/shiki.ts 中通过 defineShikiSetup 配置,例如使用 vitesse-dark / vitesse-light,也可选 dracula、one-dark-pro、nord、material-theme、github-dark / github-light。代码分组用 <<< 创建带标签页的分组(资料标注为实验性)。外部导入支持整文件、行范围(#L5-10)、语言覆盖与高亮。Diff 高亮使用 [!code --]、[!code ++]、[!code highlight]、[!code warning]、[!code error]。TwoSlash 可提供 TypeScript 悬停信息。聚焦模式用 {focus} 让非高亮行变暗。内联代码支持样式标记。可用 CSS 类自定义代码块样式。

使用方式:在 Markdown 中写代码围栏并附加花括号选项,例如语言后跟高亮或选项;外部导入使用 <<< @/snippets/example.ts。

限制:资料未说明安装步骤、依赖要求与版本兼容范围,部分写法被标注为实验性,实际效果需以 Slidev 官方文档为准。