slidev-code-blocks

Slidev Code Blocks

This skill covers everything about displaying code in Slidev presentations, including syntax highlighting with Shiki, line highlighting, code groups, and importing external snippets.

When to Use This Skill

• Displaying code snippets in presentations
• Highlighting specific lines of code
• Creating step-by-step code reveals
• Showing code comparisons
• Importing code from external files

Basic Code Blocks

Simple Code Block

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

With Language Specification

Shiki supports 100+ languages:

```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!");
}
```

Line Numbers

Enable Line Numbers

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

Global Configuration

In frontmatter:

---
lineNumbers: true
---

Starting Line Number

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

Line Highlighting

Highlight Specific Lines

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

Highlight Ranges

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

Click-Through Highlighting

Reveal highlights step by step:

```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
```

Highlight All Then Focus

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

• Click 0: All lines visible
• Click 1: Line 1 highlighted
• Click 2: Line 2 highlighted
• Click 3: Line 3 highlighted