Monaco 运行器与可写模式

monaco 让代码可编辑，monaco-run 让代码可运行，monaco-write 让代码可写回文件——把"现场编码 + 立即执行"搬进幻灯片。

monaco-run 运行代码

monaco-run 代码块不仅可编辑，还能点击运行：

```monaco-run
const nums = [3, 1, 4, 1, 5]
console.log(nums.sort((a, b) => a - b))
```

渲染效果：编辑器下方带运行按钮，点击后在输出面板显示执行结果。

运行配置

配置	作用
lang	语言（js / ts 等）
autorun	打开即自动运行一次
input	运行时输入参数
height	编辑器高度

```monaco-run {autorun: true}
console.log('自动运行')

## 现场演示场景

monaco-run 适合"边讲边改边跑"：

````markdown
```monaco-run
// 改这里的数值，重新运行看结果
function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2)
}
console.log(fib(10))

观众看到代码、修改代码、运行代码的完整闭环，演示从"讲解"变成"体验"。

## monaco-write 可写模式

`monaco-write` 允许编辑内容**写回文件**，实现"幻灯片里直接改项目文件"：

````markdown
```monaco-write
// 此处编辑内容将写回对应的源文件
```

写回机制

项	说明
写入目标	通过配置指定目标文件
保存触发	编辑器内保存操作
权限	需配合文件系统访问能力

典型场景：

• 现场修改配置演示效果
• 在幻灯片中更新代码示例并保存
• 交互式配置讲解

运行器 vs 编辑器 vs 写模式

模式	编辑	运行	写回文件
monaco	✅	❌	❌
monaco-run	✅	✅	❌
monaco-write	✅	❌	✅

场景	推荐
静态展示	普通代码块
可编辑讲解	monaco
现场运行验证	monaco-run
修改真实文件	monaco-write

使用注意事项

注意	说明
浏览器环境	代码在浏览器沙箱运行，非 Node 原生
网络请求	运行时代码的网络能力受限
写入安全	monaco-write 涉及文件写入，注意权限
构建产物	导出 PDF 等静态格式不含运行功能

完整交互示例

# 现场调参

```monaco-run
// 修改参数并运行
const price = 100
const discount = 0.8
console.log(`折后价：${price * discount}`)

Monaco 运行器把"讲代码"升级为"玩代码"，配合 v-click 与自定义组件，可以做出真正的交互式技术演示。