| 1 | --- |
| 2 | depends: |
| 3 | - guide/syntax#code-block |
| 4 | relates: |
| 5 | - Monaco Editor: https://microsoft.github.io/monaco-editor/ |
| 6 | - Configure Monaco Editor: /custom/config-monaco |
| 7 | tags: [codeblock, editor] |
| 8 | description: | |
| 9 | Turn code blocks into fully-featured editors, or generate a diff between two code blocks. |
| 10 | --- |
| 11 | |
| 12 | # Monaco Editor |
| 13 | |
| 14 | <video src="https://github.com/slidevjs/slidev/assets/11247099/0c6ce681-80d3-4555-93bf-9288ee533462" controls rounded shadow w-full></video> |
| 15 | |
| 16 | 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! |
| 17 | |
| 18 | ````md |
| 19 | ```ts {monaco} |
| 20 | console.log('HelloWorld') |
| 21 | ``` |
| 22 | ```` |
| 23 | |
| 24 | Learn more about [Configuring Monaco](/custom/config-monaco). |
| 25 | |
| 26 | ## Diff Editor |
| 27 | |
| 28 | Monaco can also generate a diff between two code blocks. Use `{monaco-diff}` to turn the block into a [Monaco diff editor](https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#example-creating-the-diffeditor-multi-line-example) and use `~~~` to separate the original and modified code! |
| 29 | |
| 30 | ````md |
| 31 | ```ts {monaco-diff} |
| 32 | console.log('Original text') |
| 33 | ~~~ |
| 34 | console.log('Modified text') |
| 35 | ``` |
| 36 | ```` |
| 37 | |
| 38 | ## Editor Height |
| 39 | |
| 40 | 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'}`. |
| 41 | |
| 42 | ````md |
| 43 | ```ts {monaco} {height:'auto'} |
| 44 | // The editor will automatically grow as you type more code |
| 45 | console.log('Hello, World!') |
| 46 | ``` |
| 47 | ```` |
| 48 | |
| 49 | You can also set a specific height using CSS units like `{height:'300px'}` or `{height:'100%'}`. |
| 50 | |
| 51 | ## Line Numbers |
| 52 | |
| 53 | Like other code blocks, the Monaco editor respects the global `lineNumbers` headmatter. You can also toggle line numbers for a single editor with `{lines:true}` while keeping it editable. |
| 54 | |
| 55 | ````md |
| 56 | ```ts {monaco} {lines:true} |
| 57 | console.log('HelloWorld') |
| 58 | ``` |
| 59 | ```` |
| 60 |