Monaco Editor โ
Whenever you want to do some modification in the presentation, simply add {monaco} after the language id โ it turns the block into a fully-featured Monaco editor!
md
```ts {monaco}
console.log('HelloWorld')
```Learn more about Configuring Monaco.
Diff Editor โ
Monaco can also generate a diff between two code blocks. Use {monaco-diff} to turn the block into a Monaco diff editor and use ~~~ to separate the original and modified code!
md
```ts {monaco-diff}
console.log('Original text')
~~~
console.log('Modified text')
```Editor Height โ
By default, the Monaco editor has a fixed height based on the initial content. If you start with an empty or small code block and want the editor to automatically grow as you type more code, you can set {height:'auto'}.
md
```ts {monaco} {height:'auto'}
// The editor will automatically grow as you type more code
console.log('Hello, World!')
```You can also set a specific height using CSS units like {height:'300px'} or {height:'100%'}.