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]
npx skills add yoanbernabeu/slidev-code-blocks下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer