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%'}。