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]