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

markdown

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

With Language Specification

Shiki supports 100+ languages:

markdown

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

markdown

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

markdown

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

Line Numbers

Enable Line Numbers

markdown

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

Global Configuration

In frontmatter:

yaml

---
lineNumbers: true
---

Starting Line Number

markdown

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

Line Highlighting

Highlight Specific Lines

markdown

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

Highlight Ranges

markdown

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

markdown

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

markdown

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

markdown

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

Code Block Options

Maximum Height

markdown

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

Wrapping

markdown

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

markdown

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

typescript

// 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:

markdown

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

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

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

markdown

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

Importing External Code

Full File Import

markdown

<<< @/snippets/example.ts

With Line Range

markdown

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

With Language Override

markdown

<<< @/snippets/config{json}

With Highlighting

markdown

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

Diff Highlighting

Show code changes:

markdown

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

Highlight Specific Changes

markdown

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

TwoSlash Integration

TypeScript hover information:

markdown

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

Hover annotations:

markdown

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

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

Code Focus

Focus Mode

Dim non-highlighted lines:

markdown

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

Click Focus Transitions

markdown

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

Inline Code

Simple Inline

markdown

Use the `useState` hook for state management.

Styled Inline

markdown

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

Code Block Styling

Custom CSS Class

markdown

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

css

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

Scoped Styles

markdown

# Code Slide

```js
const x = 1

code


## Best Practices

### 1. Keep Code Concise

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

code


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

2. Use Meaningful Highlights

❌ No context

markdown

```typescript
const x = 1
```

✓ Guided attention

markdown

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

3. Progressive Reveal for Complex Code

markdown

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

markdown

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

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

Common Patterns

Before/After Comparison

markdown

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

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

Step-by-Step Tutorial

markdown

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

markdown

---
layout: default
---

# [Topic]

[Brief explanation of what the code does]

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

code


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