Skip to content

Monaco 编辑器

当你想在演示中进行一些修改时,只需在语言标识符后添加 {monaco} — 它会将代码块转换为功能完备的 Monaco 编辑器!

md
```ts {monaco}
console.log('HelloWorld')
```

了解更多关于配置 Monaco

差异编辑器

Monaco 还可以生成两个代码块之间的差异对比。使用 {monaco-diff} 将代码块转换为 Monaco 差异编辑器,并使用 ~~~ 分隔原始代码和修改后的代码!

md
```ts {monaco-diff}
console.log('Original text')
~~~
console.log('Modified text')
```

编辑器高度

默认情况下,Monaco 编辑器的高度是基于初始内容固定的。如果你从空的或较小的代码块开始,并希望编辑器随着输入更多代码自动增长,可以设置 {height:'auto'}

md
```ts {monaco} {height:'auto'}
// 编辑器会随着你输入更多代码自动增长
console.log('Hello, World!')
```

你也可以使用 CSS 单位设置特定高度,如 {height:'300px'}{height:'100%'}

Released under the MIT License.