| 1 | --- |
| 2 | depends: |
| 3 | - features/monaco-editor |
| 4 | - guide/animations |
| 5 | relates: |
| 6 | - Custom Code Runners: /custom/config-code-runners |
| 7 | since: v0.48.0 |
| 8 | tags: [codeblock, editor] |
| 9 | description: | |
| 10 | Run code directly in the editor and see the result. |
| 11 | --- |
| 12 | |
| 13 | # Monaco Runner |
| 14 | |
| 15 | Slidev also provides the Monaco Runner Editor, which allows you to run the code directly in the editor and see the result. Use `{monaco-run}` to turn the block into a Monaco Runner Editor. |
| 16 | |
| 17 | ````md |
| 18 | ```ts {monaco-run} |
| 19 | function distance(x: number, y: number) { |
| 20 | return Math.sqrt(x ** 2 + y ** 2) |
| 21 | } |
| 22 | console.log(distance(3, 4)) |
| 23 | ``` |
| 24 | ```` |
| 25 | |
| 26 | It provides the editor with a "Run" button, and shows the result of the code execution right below the code block. You may also modify the code and the result will be re-evaluated on the fly. |
| 27 | |
| 28 | By default it will automatically run the code when the slide is loaded; if you want to instead explicitly trigger the run, you can set `{autorun:false}`. |
| 29 | |
| 30 | ````md |
| 31 | ```ts {monaco-run} {autorun:false} |
| 32 | console.log('Click the play button to run me') |
| 33 | ``` |
| 34 | ```` |
| 35 | |
| 36 | If you want to only show the output in certain clicks, you can use the `showOutputAt` prop. The value is the same as `v-click`. |
| 37 | |
| 38 | ````md |
| 39 | ```ts {monaco-run} {showOutputAt:'+1'} |
| 40 | console.log('Shown after 1 click') |
| 41 | ``` |
| 42 | ```` |
| 43 | |
| 44 | Currently, Slidev supports running JavaScript and TypeScript code out-of-box. Refer to [Custom Code Runners](/custom/config-code-runners) for custom language support. |
| 45 |