重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
slidev-monaco-editor by yoanbernabeu/slidev-skills
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-monaco-editor此技能涵盖将 Monaco 编辑器(VS Code 使用的编辑器)集成到您的 Slidev 演示文稿中,用于实时编码、交互式演示和可执行代码块。
在任何代码块中添加 {monaco}:
```typescript {monaco}
const greeting = 'Hello, World!'
console.log(greeting)
```
这将创建一个可编辑的代码块,具有:
```typescript {monaco}{2,3}
const a = 1
const b = 2 // 高亮显示
const c = 3 // 高亮显示
```
直接在演示文稿中执行代码:
```javascript {monaco-run}
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(n => n * 2)
console.log(doubled)
```
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
点击"运行"以执行并查看输出。
```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'}
// 点击一次后显示输出
console.log('Hello!')
```
```typescript {monaco}{height:'300px'}
// 更高的编辑器
function longFunction() {
// ...
}
```
```typescript {monaco}{readonly:true}
// 不可编辑
const CONSTANT = 'value'
```
```typescript {monaco-diff}
const original = 'Hello'
~~~
const modified = 'Hello, World!'
```
import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup((monaco) => {
// 编辑器选项
return {
editorOptions: {
fontSize: 14,
fontFamily: 'JetBrains Mono, monospace',
minimap: { enabled: false },
lineNumbers: 'on',
wordWrap: 'on',
tabSize: 2,
scrollBeyondLastLine: false,
automaticLayout: true,
},
// 浅色/深色主题
theme: {
light: 'vs',
dark: 'vs-dark',
},
}
})
import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup((monaco) => {
// 定义自定义主题
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) => {
// 添加 React 类型
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}
// 内联定义的类型
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}
// 交互式计数器
let count = 0
function increment() {
count++
console.log(`Count: ${count}`)
}
// 多次点击运行!
increment()
```
```typescript {monaco-run}
// 模拟 API 调用
async function fetchUser(id: number) {
// 模拟网络延迟
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}
// 带步骤的冒泡排序
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)
```
# 数组方法
```typescript {monaco-run}
const numbers = [1, 2, 3, 4, 5]
// 尝试更改函数!
const result = numbers
.filter(n => n % 2 === 0)
.map(n => n * 2)
console.log(result)
```
尝试修改代码以:
- 过滤奇数
- 乘以三而不是乘以二
# 修复错误
```typescript {monaco-run}
// 此代码有错误 - 你能修复它吗?
function reverseString(str: string) {
return str.split('').reserve().join('')
}
console.log(reverseString('hello'))
// 预期输出:'olleh'
```
```typescript {monaco-run}
const data = [
{ name: 'Alice', score: 85 },
{ name: 'Bob', score: 92 },
{ name: 'Charlie', score: 78 },
]
// 计算统计信息
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}
// 点击时出现代码,然后可编辑
function greet(name: string) {
return `Hello, ${name}!`
}
```
</v-click>
<v-clicks>
从这段代码开始:
```typescript {monaco}
const x = 1
```
然后尝试添加更多行!
</v-clicks>
```typescript {monaco-run}
// 良好:单一概念
const sum = [1, 2, 3].reduce((a, b) => a + b, 0)
console.log(sum) // 6
```
```typescript {monaco-run}
// 完成函数:
function capitalize(str: string): string {
// 你的代码在这里
return str
}
console.log(capitalize('hello')) // 应该打印:'Hello'
```
```typescript {monaco-run}
// 代码示例
const result = [1, 2, 3].map(n => n ** 2)
console.log(result)
// 预期输出:[1, 4, 9]
```
```typescript {monaco-run}
try {
const result = riskyOperation()
console.log(result)
} catch (error) {
console.error('Error:', error.message)
}
function riskyOperation() {
// 可能抛出错误
throw new Error('Oops!')
}
```
创建 Monaco 代码块时:
目的:[代码演示的内容]
交互:[观众应如何交互]
代码:
```[语言] {monaco-run}
// 清晰的注释解释目的
[具有良好默认值的代码]
// 注明预期输出
建议的编辑:
每周安装次数
55
仓库
GitHub 星标数
22
首次出现时间
2026年1月25日
安全审计
已安装于
codex45
opencode44
gemini-cli44
kimi-cli43
github-copilot42
amp42
This skill covers integrating Monaco Editor (the editor powering VS Code) into your Slidev presentations for live coding, interactive demos, and executable code blocks.
Add {monaco} to any code block:
```typescript {monaco}
const greeting = 'Hello, World!'
console.log(greeting)
```
This creates an editable code block with:
```typescript {monaco}{2,3}
const a = 1
const b = 2 // highlighted
const c = 3 // highlighted
```
Execute code directly in the presentation:
```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 {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)
```
# Array Methods
```typescript {monaco-run}
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)
```
Try modifying the code to:
- Filter odd numbers
- Triple instead of double
# Fix the Bug
```typescript {monaco-run}
// This code has a bug - can you fix it?
function reverseString(str: string) {
return str.split('').reserve().join('')
}
console.log(reverseString('hello'))
// Expected: 'olleh'
```
```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!')
}
```
When creating Monaco code blocks:
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
SUGGESTED EDITS:
Weekly Installs
55
Repository
GitHub Stars
22
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex45
opencode44
gemini-cli44
kimi-cli43
github-copilot42
amp42
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
125,600 周安装