slidev-code-blocks

Slidev 代码块

本技能涵盖在 Slidev 演示文稿中展示代码的所有内容，包括使用 Shiki 进行语法高亮、行高亮、代码组，以及导入外部代码片段。

何时使用此技能

• 在演示文稿中展示代码片段
• 高亮特定代码行
• 创建分步代码展示
• 展示代码对比
• 从外部文件导入代码

基本代码块

简单代码块

```javascript
function greet(name) {
  return `Hello, ${name}!`
}
```

指定语言

Shiki 支持 100 多种语言：

```typescript
interface User {
  id: number
  name: string
  email: string
}
```

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

```rust
fn main() {
    println!("Hello, Rust!");
}
```

行号

启用行号

```typescript {lines:true}
const x = 1
const y = 2
const z = x + y
```

全局配置

在 frontmatter 中：

---
lineNumbers: true
---

起始行号

```typescript {startLine:5}
// This starts at line 5
const x = 1
```

行高亮

高亮特定行

```typescript {2,3}
const a = 1
const b = 2  // highlighted
const c = 3  // highlighted
const d = 4
```

高亮范围

```typescript {1-3,5}
line 1  // highlighted
line 2  // highlighted
line 3  // highlighted
line 4
line 5  // highlighted
```

点击逐步高亮

逐步显示高亮内容：

```typescript {1|2-3|5}
const name = 'Slidev'      // Click 1
const version = '0.50'     // Click 2
const author = 'Anthony'   // Click 2

console.log(name, version) // Click 3
```

全部高亮后再聚焦

```typescript {*|1|2|3}
const a = 1
const b = 2
const c = 3
```

• 点击 0：显示所有行
• 点击 1：高亮第 1 行
• 点击 2：高亮第 2 行
• 点击 3：高亮第 3 行

设置最终状态

```typescript {1|2|all}
const x = 1
const y = 2
```

代码块选项

最大高度

```typescript {maxHeight:'200px'}
// Long code block
// with many lines
// ...
```

自动换行

```typescript {wrap:true}
const veryLongLine = 'This is a very long line that would normally overflow the code block but now it wraps nicely'
```

组合选项

```typescript {2-4|6-8}{lines:true,startLine:10,maxHeight:'300px'}
function example() {
  const a = 1
  const b = 2
  const c = 3

  return {
    sum: a + b + c
  }
}
```

代码主题

在 setup/shiki.ts 中配置

// setup/shiki.ts
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'vitesse-dark',
      light: 'vitesse-light',
    },
  }
})

常用主题

• vitesse-dark / vitesse-light
• dracula
• one-dark-pro
• nord
• material-theme
• github-dark / github-light

代码组

在标签页中展示多个代码变体：

```typescript {monaco}
// TypeScript version
interface User {
  name: string
}
```

```javascript
// JavaScript version
const user = {
  name: 'John'
}
```

使用 <<< 创建带标签页的代码组（实验性功能）：

<<< @/snippets/example.ts
<<< @/snippets/example.js

导入外部代码

导入完整文件

<<< @/snippets/example.ts

指定行范围

<<< @/snippets/example.ts#L5-10

覆盖语言设置

<<< @/snippets/config{json}

添加高亮

<<< @/snippets/example.ts {2,4}

差异高亮

展示代码更改：

```typescript
function greet(name: string) {
  return `Hello, ${name}!` // [!code --]
  return `Hi, ${name}!`    // [!code ++]
}
```

高亮特定更改

```typescript
const config = {
  theme: 'dark',   // [!code highlight]
  debug: false,    // [!code warning]
  timeout: 1000,   // [!code error]
}
```

TwoSlash 集成

TypeScript 悬浮信息：

```typescript twoslash
const message = 'Hello'
//    ^?
```

悬停注释：

```typescript twoslash
interface User {
  name: string
  age: number
}

const user: User = {
  name: 'John',
  age: 30
}
//    ^?
```

代码聚焦

聚焦模式

弱化未高亮的行：

```typescript {2}{focus}
const a = 1
const b = 2  // Focused, others dimmed
const c = 3
```

点击聚焦过渡效果

```typescript {1|2|3}{focus}
step1()  // First focused
step2()  // Then this
step3()  // Finally this
```

行内代码

简单行内代码

Use the `useState` hook for state management.

带样式的行内代码

The function returns `true`{.text-green-500} or `false`{.text-red-500}.

代码块样式

自定义 CSS 类

```typescript {class:'my-code'}
const x = 1
```

.my-code {
  font-size: 0.9em;
  border-radius: 8px;
}

作用域样式

# Code Slide

```js
const x = 1

.slidev-code { font-size: 1.2em; }

## Best Practices

### 1. Keep Code Concise

❌ **Too much code**
````markdown
```typescript
// Full 100-line file

✓ **Focused snippet**
````markdown
```typescript
// Just the relevant function
function handleClick() {
  setState(value => value + 1)
}
```

2. 使用有意义的高亮

❌ 缺少上下文

```typescript
const x = 1
```

✓ 引导注意力

```typescript {2}
const x = 1
const important = 'focus here'  // highlighted
const y = 2
```

3. 对复杂代码进行渐进式展示

```typescript {1-2|4-6|8-10}
// Step 1: Define types
interface User { name: string }

// Step 2: Create function
function greet(user: User) {
  return `Hello, ${user.name}`
}

// Step 3: Usage
const greeting = greet({ name: 'World' })
console.log(greeting)
```

4. 使用注释提供上下文

```typescript
// BAD: Magic numbers
const delay = 1000

// GOOD: Named constants
const ANIMATION_DELAY_MS = 1000
```

常见模式

前后对比

```typescript
// Before
function add(a, b) {
  return a + b
}

// After
const add = (a: number, b: number): number => a + b
```

分步教程

```typescript {1|1-4|1-7|1-10}
// Step 1: Import
import { ref } from 'vue'

// Step 2: Create ref
const count = ref(0)

// Step 3: Create function
function increment() {
  count.value++
}
```

输出格式

创建代码幻灯片时，请提供：

---
layout: default
---

# [Topic]

[Brief explanation of what the code does]

```[language] {[highlights]}{[options]}
[code]

**KEY DECISIONS:**
- Language: [chosen language]
- Highlighting: [which lines and why]
- Animation: [click sequence if any]
- Theme: [if non-default]