yoanbernabeu 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
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-lightdraculaone-dark-pronordmaterial-themegithub-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:
```typescript
function greet(name: string) {
return `Hello, ${name}!` // [!code --]
return `Hi, ${name}!` // [!code ++]
}
```
Highlight Specific Changes
```typescript
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`{.text-green-500} or `false`{.text-red-500}.
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
```typescript
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
```typescript
// BAD: Magic numbers
const delay = 1000
// GOOD: Named constants
const ANIMATION_DELAY_MS = 1000
```
Common Patterns
Before/After Comparison
```typescript
// 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]