slidev-monaco-editor

Monaco Editor in Slidev

This skill covers integrating Monaco Editor (the editor powering VS Code) into your Slidev presentations for live coding, interactive demos, and executable code blocks.

When to Use This Skill

• Live coding demonstrations
• Interactive code editing during presentations
• Running code examples in real-time
• Teaching programming concepts
• Showing auto-completion and type hints

Enabling Monaco Editor

Basic Monaco Block

Add {monaco} to any code block:

```typescript {monaco}
const greeting = 'Hello, World!'
console.log(greeting)
```

This creates an editable code block with:

• Syntax highlighting
• Auto-completion
• Type checking (for TypeScript)
• Bracket matching

Monaco with Line Highlighting

```typescript {monaco}{2,3}
const a = 1
const b = 2  // highlighted
const c = 3  // highlighted
```

Monaco Runner

Execute code directly in the presentation:

JavaScript Runner

```javascript {monaco-run}
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(n => n * 2)
console.log(doubled)
```

Click "Run" to execute and see output.

TypeScript Runner

```typescript {monaco-run}
interface User {
  name: string
  age: number
}

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

console.log(`${user.name} is ${user.age} years old`)
```

Auto-Run on Load

```javascript {monaco-run} {autorun:true}
console.log('This runs automatically!')
```

Show Output Only

```javascript {monaco-run} {showOutputAt:'+1'}
// Output shows after one click
console.log('Hello!')
```

Configuration Options

Editor Height

```typescript {monaco}{height:'300px'}
// Taller editor
function longFunction() {
  // ...
}
```

Read-Only Mode

```typescript {monaco}{readonly:true}
// Cannot be edited
const CONSTANT = 'value'
```

Diff Editor

```typescript {monaco-diff}
const original = 'Hello'
~~~
const modified = 'Hello, World!'
```