slidev-code-blocks（幻灯片代码块）

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

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

With Language Specification

Shiki supports 100+ languages:

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

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

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

Line Numbers

Enable Line Numbers

const x = 1 const y = 2 const z = x + y

Global Configuration

In frontmatter:

---
lineNumbers: true
---

Starting Line Number

// This starts at line 5 const x = 1

Line Highlighting

Highlight Specific Lines

const a = 1 const b = 2 // highlighted const c = 3 // highlighted const d = 4

Highlight Ranges

line 1 // highlighted line 2 // highlighted line 3 // highlighted line 4 line 5 // highlighted

Click-Through Highlighting

Reveal highlights step by step:

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

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

const x = 1 const y = 2

Code Block Options

Maximum Height

// Long code block // with many lines // ...

Wrapping

const veryLongLine = 'This is a very long line that would normally overflow the code block but now it wraps nicely'

Combined Options

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-light
• dracula
• one-dark-pro
• nord
• material-theme
• github-dark / github-light

Code Groups

Show multiple code variants in tabs:

// TypeScript version interface User { name: string }

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

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

Highlight Specific Changes

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

TwoSlash Integration

TypeScript hover information:

const message = 'Hello' // ^?

Hover annotations:

interface User { name: string age: number }

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

Code Focus

Focus Mode

Dim non-highlighted lines:

const a = 1 const b = 2 // Focused, others dimmed const c = 3

Click Focus Transitions

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

const x = 1

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

Scoped Styles

# Code Slide

const x = 1

Best Practices

1. Keep Code Concise

❌ Too much code

// Full 100-line file

✓ Focused snippet

// Just the relevant function function handleClick() { setState(value => value + 1) }

2. Use Meaningful Highlights

❌ No context

const x = 1

✓ Guided attention

const x = 1 const important = 'focus here' // highlighted const y = 2

3. Progressive Reveal for Complex Code

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

// BAD: Magic numbers const delay = 1000

// GOOD: Named constants const ANIMATION_DELAY_MS = 1000

Common Patterns

Before/After Comparison

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

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

Step-by-Step Tutorial

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

[code]

KEY DECISIONS:

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