SuperAPI AI 工具集

slidev-monaco-editor

编程与开发

查看项目

更新于 10-15 23:24

技能介绍

用途:该技能用于在 Slidev 演示文稿中集成 Monaco Editor,实现实时编码、交互式演示和可执行代码块,适合现场编码演示、演示中交互式编辑代码、实时运行代码示例、讲解编程概念以及展示自动补全与类型提示。

主要能力:在任意代码块添加 {monaco} 即可生成可编辑代码块,具备语法高亮、自动补全、TypeScript 类型检查与括号匹配;{monaco}{2,3} 可高亮指定行;{monaco-run} 可直接在演示中执行代码并点击 Run 查看输出,支持 JavaScript 与 TypeScript;{autorun:true} 可加载时自动运行,{showOutputAt:'+1'} 可延迟显示输出;{monaco-diff} 提供差异编辑器;{height:'300px'} 调整编辑器高度,{readonly:true} 设为只读。

使用方式:在 setup/monaco.ts 中通过 defineMonacoSetup 配置编辑器选项(如 fontSize、fontFamily、minimap、lineNumbers、wordWrap、tabSize 等)与明暗主题;可调用 monaco.editor.defineTheme 定义自定义主题;可通过 fetch 获取类型定义并调用 monaco.languages.typescript.typescriptDefaults.addExtraLib 添加额外类型库,也支持内联类型定义。可与 v-click、v-clicks 动画组合,实现先展示后编辑或分步演示。

适用场景:教学与培训中的编程概念讲解、算法可视化、交互式测验(如修复 bug)、实时数据操作演示、API 模拟等。

限制:无法访问 DOM,仅可使用标准 JavaScript API,不能导入外部包,输出仅基于控制台。