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:

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

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

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

### With Final State

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

Code Block Options

Maximum Height

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

### Wrapping

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

Combined Options

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

## Code Themes

### Configure in setup/shiki.ts

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

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

### Popular Themes

- `vitesse-dark` / `vitesse-light`

- `dracula`

- `one-dark-pro`

- `nord`

- `material-theme`

- `github-dark` / `github-light`

## Code Groups

Show multiple code variants in tabs:

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

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

Use `<<< ` to create tabbed code groups (experimental):

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

## Importing External Code

### Full File Import

<<< @/snippets/example.ts

### With Line Range

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

### With Language Override

<<< @/snippets/config{json}

### With Highlighting

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

## Diff Highlighting

Show code changes:

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

### Highlight Specific Changes

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

## TwoSlash Integration

TypeScript hover information:

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

Hover annotations:

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

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

## Code Focus

### Focus Mode

Dim non-highlighted lines:

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

Click Focus Transitions

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

## Inline Code

### Simple Inline

Use the useState hook for state management.

### Styled Inline

The function returns true or false.

## Code Block Styling

### Custom CSS Class

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

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

Scoped Styles

# Code Slide

```js
const x = 1

## 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. Use Meaningful Highlights

❌ **No context**

const x = 1

✓ **Guided attention**

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

3. Progressive Reveal for Complex Code

```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. Use Comments for Context

// BAD: Magic numbers
const delay = 1000

// GOOD: Named constants
const ANIMATION_DELAY_MS = 1000

## Common Patterns

### Before/After Comparison

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

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

### Step-by-Step Tutorial

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

Output Format

When creating code slides, provide:

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

slidev-code-blocks

安装