代码块与语法高亮

技术演示中代码是核心内容，Slidev 内置的代码高亮让代码块在幻灯片中清晰、美观且可控。

Shiki 高亮引擎

Slidev 默认使用 Shiki 作为高亮引擎——与 VS Code 相同的高亮内核，支持 100+ 语言、自动匹配主题配色。在 Markdown 中用标准代码块语法并标注语言即可获得高亮：

```java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello Slidev");
    }
}
```

支持任何 VS Code 语法文件支持的语言：java、python、ts、js、go、rust、sql、yaml、json、bash 等。

在 Frontmatter 中可切换引擎或关闭高亮：

---
highlighter: shiki     # 默认值，也可切换为 prism
---

行号 lineNumbers

在 Frontmatter 中开启后，所有代码块自动显示行号：

---
lineNumbers: true
---

效果示例（开启行号后代码左侧出现行号）：

public static void main(String[] args) {
    System.out.println("line 1");
}

行号默认从 1 开始；可以在代码块开头手动指定起始行号（自动补零对齐）：

```java {6}
public class Demo {
    ...
}
```

上面的 {6} 语法含义见下文「行高亮」；起始行号通过 lineNumbers: 6 指定，此处仅展示组合写法。

最大高度 maxHeight

代码较长时，可用 maxHeight 控制代码块的最大高度，超出部分出现滚动条，避免代码块溢出幻灯片：

```java {maxHeight:'300px'}
public class LongCode {
    // 多行代码...
    // 多行代码...
    // 多行代码...
}
```

行高亮语法 {1,3-5}

在代码块语言标识后追加 {...} 即可高亮指定行：

```java {1,3-5}
public class Demo {        // 第 1 行高亮
    private int a;         // 第 3 行高亮
    private int b;         // 第 4 行高亮
    private int c;         // 第 5 行高亮
    private int d;
}
```

语法规则：

写法	含义
{3}	高亮第 3 行
{1,3-5}	高亮第 1 行以及第 3 至 5 行
{1,3-5,8}	多段组合
{maxHeight:'300px'}	限高（不产生行高亮）
`{1,3-5	maxHeight:'300px'}`

高亮与点击动画配合

行高亮还可以与 v-click 结合，实现逐行讲解：每次点击展示下一段高亮。

```java {1|2|3}
// 第 1 次点击高亮此行
// 第 2 次点击高亮此行
// 第 3 次点击高亮此行
```

{1|2|3} 表示三个步骤：点击第一次高亮第 1 行，第二次切换到第 2 行，依此类推。这是技术演示中最常用的"逐行解释代码"手法。

高亮示例汇总

```java {1|2-3|4}
class Demo {
    void step1() {}   // 第 1 次点击
    void step2() {}   // 第 2 次点击
    void step3() {}   // 第 3 次点击
}
```

特性	语法位置	作用
语言标注	代码块起始	触发对应语言高亮
lineNumbers: true	Frontmatter	全局开启行号
{1,3-5}	语言后	高亮指定行
`{1	2	3}`
{maxHeight:'300px'}	语言后	限制最大高度

常用代码块配置

---
lineNumbers: true        # 全局行号
highlighter: shiki       # 高亮引擎
---

代码块级的 {...} 选项优先级高于全局配置，单页可按需覆盖。掌握行高亮与逐行动画，即可在技术分享中把代码讲得层层递进。