--- name: slidev-code-blocks description: Create beautiful code blocks with Shiki syntax highlighting. Use this skill for code snippets, line highlighting, and code groups. --- # 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 ````markdown ```javascript function greet(name) { return `Hello, ${name}!` } ``` ```` ### With Language Specification Shiki supports 100+ languages: ````markdown ```typescript interface User { id: number name: string email: string } ``` ```` ````markdown ```python def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) ``` ```` ````markdown ```rust fn main() { println!("Hello, Rust!"); } ``` ```` ## Line Numbers ### Enable Line Numbers ````markdown ```typescript {lines:true} const x = 1 const y = 2 const z = x + y ``` ```` ### Global Configuration In frontmatter: ```yaml --- lineNumbers: true --- ``` ### Starting Line Number ````markdown ```typescript {startLine:5} // This starts at line 5 const x = 1 ``` ```` ## Line Highlighting ### Highlight Specific Lines ````markdown ```typescript {2,3} const a = 1 const b = 2 // highlighted const c = 3 // highlighted const d = 4 ``` ```` ### Highlight Ranges ````markdown ```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: ````markdown ```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 ````markdown ```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 ````markdown ```typescript {1|2|all} const x = 1 const y = 2 ``` ```` ## Code Block Options ### Maximum Height ````markdown ```typescript {maxHeight:'200px'} // Long code block // with many lines // ... ``` ```` ### Wrapping ````markdown ```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 ````markdown ```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 ```typescript // 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: ````markdown ```typescript {monaco} // TypeScript version interface User { name: string } ``` ```javascript // JavaScript version const user = { name: 'John' } ``` ```` Use `<<< ` to create tabbed code groups (experimental): ````markdown <<< @/snippets/example.ts <<< @/snippets/example.js ```` ## Importing External Code ### Full File Import ````markdown <<< @/snippets/example.ts ```` ### With Line Range ````markdown <<< @/snippets/example.ts#L5-10 ```` ### With Language Override ````markdown <<< @/snippets/config{json} ```` ### With Highlighting ````markdown <<< @/snippets/example.ts {2,4} ```` ## Diff Highlighting Show code changes: ````markdown ```typescript function greet(name: string) { return `Hello, ${name}!` // [!code --] return `Hi, ${name}!` // [!code ++] } ``` ```` ### Highlight Specific Changes ````markdown ```typescript const config = { theme: 'dark', // [!code highlight] debug: false, // [!code warning] timeout: 1000, // [!code error] } ``` ```` ## TwoSlash Integration TypeScript hover information: ````markdown ```typescript twoslash const message = 'Hello' // ^? ``` ```` Hover annotations: ````markdown ```typescript twoslash interface User { name: string age: number } const user: User = { name: 'John', age: 30 } // ^? ``` ```` ## Code Focus ### Focus Mode Dim non-highlighted lines: ````markdown ```typescript {2}{focus} const a = 1 const b = 2 // Focused, others dimmed const c = 3 ``` ```` ### Click Focus Transitions ````markdown ```typescript {1|2|3}{focus} step1() // First focused step2() // Then this step3() // Finally this ``` ```` ## Inline Code ### Simple Inline ```markdown Use the `useState` hook for state management. ``` ### Styled Inline ```markdown The function returns `true`{.text-green-500} or `false`{.text-red-500}. ``` ## Code Block Styling ### Custom CSS Class ````markdown ```typescript {class:'my-code'} const x = 1 ``` ```` ```css .my-code { font-size: 0.9em; border-radius: 8px; } ``` ### Scoped Styles ```markdown # 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** ````markdown ```typescript const x = 1 ``` ```` ✓ **Guided attention** ````markdown ```typescript {2} const x = 1 const important = 'focus here' // highlighted const y = 2 ``` ```` ### 3. Progressive Reveal for Complex Code ````markdown ```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 ````markdown ```typescript // BAD: Magic numbers const delay = 1000 // GOOD: Named constants const ANIMATION_DELAY_MS = 1000 ``` ```` ## Common Patterns ### Before/After Comparison ````markdown ```typescript // Before function add(a, b) { return a + b } // After const add = (a: number, b: number): number => a + b ``` ```` ### Step-by-Step Tutorial ````markdown ```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: ```markdown --- 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] ```