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!

```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!

```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'}.

```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%'}.