// Create beautiful code blocks with Shiki syntax highlighting. Use this skill for code snippets, line highlighting, and code groups.
Master v-click and sequential animations in Slidev. Use this skill to reveal content progressively and create engaging presentations.
Add smooth slide transitions in Slidev. Use this skill for fade, slide, and custom transitions between slides.
Animate code transformations with Shiki Magic Move. Use this skill to create smooth morphing transitions between code states.
Add live coding with Monaco Editor in Slidev. Use this skill for interactive code demos, executable code, and real-time editing.
Leverage Vue components in Slidev slides. Use this skill to add interactivity with built-in components or create custom ones.
Use built-in and custom Slidev layouts effectively. Use this skill to structure slides with cover, two-cols, image layouts and more.
| name | slidev-code-blocks |
| description | Create beautiful code blocks with Shiki syntax highlighting. Use this skill for code snippets, line highlighting, and code groups. |
This skill covers everything about displaying code in Slidev presentations, including syntax highlighting with Shiki, line highlighting, code groups, and importing external snippets.
```javascript
function greet(name) {
return `Hello, ${name}!`
}
```
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!");
}
```
```typescript {lines:true}
const x = 1
const y = 2
const z = x + y
```
In frontmatter:
---
lineNumbers: true
---
```typescript {startLine:5}
// This starts at line 5
const x = 1
```
```typescript {2,3}
const a = 1
const b = 2 // highlighted
const c = 3 // highlighted
const d = 4
```
```typescript {1-3,5}
line 1 // highlighted
line 2 // highlighted
line 3 // highlighted
line 4
line 5 // highlighted
```
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
```
```typescript {*|1|2|3}
const a = 1
const b = 2
const c = 3
```
```typescript {1|2|all}
const x = 1
const y = 2
```
```typescript {maxHeight:'200px'}
// Long code block
// with many lines
// ...
```
```typescript {wrap:true}
const veryLongLine = 'This is a very long line that would normally overflow the code block but now it wraps nicely'
```
```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
}
}
```
// setup/shiki.ts
import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup(() => {
return {
themes: {
dark: 'vitesse-dark',
light: 'vitesse-light',
},
}
})
vitesse-dark / vitesse-lightdraculaone-dark-pronordmaterial-themegithub-dark / github-lightShow 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
<<< @/snippets/example.ts
<<< @/snippets/example.ts#L5-10
<<< @/snippets/config{json}
<<< @/snippets/example.ts {2,4}
Show code changes:
```typescript
function greet(name: string) {
return `Hello, ${name}!` // [!code --]
return `Hi, ${name}!` // [!code ++]
}
```
```typescript
const config = {
theme: 'dark', // [!code highlight]
debug: false, // [!code warning]
timeout: 1000, // [!code error]
}
```
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
}
// ^?
```
Dim non-highlighted lines:
```typescript {2}{focus}
const a = 1
const b = 2 // Focused, others dimmed
const c = 3
```
```typescript {1|2|3}{focus}
step1() // First focused
step2() // Then this
step3() // Finally this
```
Use the `useState` hook for state management.
The function returns `true`{.text-green-500} or `false`{.text-red-500}.
```typescript {class:'my-code'}
const x = 1
```
.my-code {
font-size: 0.9em;
border-radius: 8px;
}
# 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)
}
```
ā No context
```typescript
const x = 1
```
ā Guided attention
```typescript {2}
const x = 1
const important = 'focus here' // highlighted
const y = 2
```
```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)
```
```typescript
// BAD: Magic numbers
const delay = 1000
// GOOD: Named constants
const ANIMATION_DELAY_MS = 1000
```
```typescript
// Before
function add(a, b) {
return a + b
}
// After
const add = (a: number, b: number): number => a + b
```
```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++
}
```
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]