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

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

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

```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`)
```

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

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

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

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

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

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup((monaco) => {
  // Editor options
  return {
    editorOptions: {
      fontSize: 14,
      fontFamily: 'JetBrains Mono, monospace',
      minimap: { enabled: false },
      lineNumbers: 'on',
      wordWrap: 'on',
      tabSize: 2,
      scrollBeyondLastLine: false,
      automaticLayout: true,
    },
    // Light/dark theme
    theme: {
      light: 'vs',
      dark: 'vs-dark',
    },
  }
})

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup((monaco) => {
  // Define custom theme
  monaco.editor.defineTheme('my-theme', {
    base: 'vs-dark',
    inherit: true,
    rules: [
      { token: 'comment', foreground: '6A9955' },
      { token: 'keyword', foreground: 'C586C0' },
    ],
    colors: {
      'editor.background': '#1a1a2e',
    },
  })

  return {
    theme: {
      dark: 'my-theme',
      light: 'vs',
    },
  }
})

// setup/monaco.ts
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // Add React types
  const reactTypes = await fetch(
    'https://unpkg.com/@types/react/index.d.ts'
  ).then(r => r.text())

  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    reactTypes,
    'file:///node_modules/@types/react/index.d.ts'
  )
})

```typescript {monaco}
// Types defined inline
interface Todo {
  id: number
  text: string
  completed: boolean
}

const todos: Todo[] = [
  { id: 1, text: 'Learn Slidev', completed: true },
  { id: 2, text: 'Create presentation', completed: false },
]
```

```typescript {monaco-run}
// Interactive counter
let count = 0

function increment() {
  count++
  console.log(`Count: ${count}`)
}

// Click Run multiple times!
increment()
```

```typescript {monaco-run}
// Simulated API call
async function fetchUser(id: number) {
  // Simulate network delay
  await new Promise(r => setTimeout(r, 500))

  return {
    id,
    name: 'John Doe',
    email: 'john@example.com'
  }
}

const user = await fetchUser(1)
console.log(user)
```

```typescript {monaco-run}
// Bubble sort with steps
function bubbleSort(arr: number[]) {
  const result = [...arr]
  const steps: string[] = []

  for (let i = 0; i < result.length; i++) {
    for (let j = 0; j < result.length - i - 1; j++) {
      if (result[j] > result[j + 1]) {
        [result[j], result[j + 1]] = [result[j + 1], result[j]]
        steps.push(`Swap: [${result.join(', ')}]`)
      }
    }
  }

  return { result, steps }
}

const { result, steps } = bubbleSort([5, 3, 8, 4, 2])
console.log('Steps:', steps.length)
steps.forEach(s => console.log(s))
console.log('Final:', result)
```

undefined

const numbers = [1, 2, 3, 4, 5]

// Try changing the function!
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2)

console.log(result)

undefined

undefined

// This code has a bug - can you fix it?
function reverseString(str: string) {
  return str.split('').reserve().join('')
}

console.log(reverseString('hello'))
// Expected: 'olleh'

undefined

```typescript {monaco-run}
const data = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 78 },
]

// Calculate statistics
const average = data.reduce((sum, d) => sum + d.score, 0) / data.length
const highest = Math.max(...data.map(d => d.score))
const passing = data.filter(d => d.score >= 80)

console.log(`Average: ${average.toFixed(1)}`)
console.log(`Highest: ${highest}`)
console.log(`Passing: ${passing.map(d => d.name).join(', ')}`)
```

<v-click>

```typescript {monaco}
// Code appears on click, then is editable
function greet(name: string) {
  return `Hello, ${name}!`
}
```

</v-click>

<v-clicks>

Start with this code:

```typescript {monaco}
const x = 1
```

Then try adding more lines!

</v-clicks>

```typescript {monaco-run}
// GOOD: Single concept
const sum = [1, 2, 3].reduce((a, b) => a + b, 0)
console.log(sum) // 6
```

```typescript {monaco-run}
// Complete the function:
function capitalize(str: string): string {
  // Your code here
  return str
}

console.log(capitalize('hello')) // Should print: 'Hello'
```

```typescript {monaco-run}
// Code example
const result = [1, 2, 3].map(n => n ** 2)
console.log(result)
// Expected output: [1, 4, 9]
```

```typescript {monaco-run}
try {
  const result = riskyOperation()
  console.log(result)
} catch (error) {
  console.error('Error:', error.message)
}

function riskyOperation() {
  // Might throw an error
  throw new Error('Oops!')
}
```

PURPOSE: [What the code demonstrates]
INTERACTION: [How audience should interact]

CODE:
```[language] {monaco-run}
// Clear comments explaining purpose

[Code with good defaults]

// Expected output noted

undefined