Monaco 编辑器集成

Monaco 是 VS Code 同源的编辑器内核。Slidev 内置集成：代码块可以变成可交互的实时编辑器，观众看到的不再是静态代码，而是可以编辑、有提示的"活"代码。

monaco 代码块

把代码块语言标注为 monaco，代码块即转换为编辑器：

```monaco
const greet = (name) => `Hello, ${name}!`
console.log(greet('Slidev'))
```

渲染效果：一个完整编辑器，带行号、语法高亮、光标与选择。

指定语言

默认按代码内容推断语言，也可显式指定：

```monaco {lang: 'ts'}
const x: number = 42
```

常用配置

配置	作用
lang	语言（ts / js / python 等）
height	编辑器高度
readonly	只读模式
theme	亮色/暗色主题
inline	无边框紧凑模式

自动补全 / 悬停提示 / 语法检查

Monaco 编辑器继承 VS Code 的智能能力：

• 自动补全：输入时提示变量、方法、关键字
• 悬停提示：鼠标悬停在标识符上显示类型与文档
• 语法检查：实时标红语法错误与类型错误（TypeScript）

这些能力开箱即用，尤其对 TypeScript 支持完整：

```monaco
interface User {
  name: string
  age: number
}
const user: User = { name: 'slidev', age: 2 }
user.age.toFixed(2)
```

user.age 悬停显示类型 number，.toFixed 自动补全，类型错误实时提示——演示类型系统的绝佳载体。

monaco-diff 差异对比

monaco-diff 把代码块渲染为左右差异视图，适合讲重构、变更：

```monaco-diff {left: 'before', right: 'after'}
```

也可以直接在一个代码块中写差异内容：

```monaco-diff
function oldName() {
  return 1
}
--------
function newName() {
  return 2
}
```

-------- 分隔线把左右两侧分开，上方为变更前、下方为变更后，增删行高亮显示。

编辑器能力速查

能力	用法
可编辑代码块	```monaco
指定语言	```monaco {lang: 'ts'}
自动补全	内置，输入即触发
悬停提示	内置，悬停查看类型
语法检查	内置，错误实时标红
差异对比	```monaco-diff

使用建议

场景	推荐
讲代码语法	普通代码块高亮即可
现场演示编辑	monaco 可编辑编辑器
讲类型系统	monaco + TypeScript
讲代码变更	monaco-diff

Monaco 让"代码讲解"变成"代码体验"：观众可以实时试编辑、看提示、查错误，是技术演示中交互价值最高的功能之一。