feat: add runnable monaco editor (#219)

[KermanX]

Overview

resolves #219

This PR introduces the "runnable" Monaco editor:

Grammar:

```ts {monaco-run}
console.log('Hello' as string, [1, 'text', new Error('message'), () => {}])
```

Example:

Screen.Recording.2024-03-07.at.23.11.59.mov

Options

• autorun: boolean | 'once'
  Default: true
  Run the code automatically after input
• outputHeight: string | undefined
  Default: undefined
• highlightOutput: boolean
• runnerOptions: Record<string, unknown>
  Will be passed to the runner as-is.

Notes

• Use setup/runners.ts to provide custom runners. You can highlight code and call other runners in your runner.
• Code will not run in the presenter preview or in the overview.
• Code will always be autorun in print mode.
• Using new Function() to run the code.
• Cannot use import statements in the code. Should use dynamic import instead.

Todos

• Print mode
• Not sure whether "monaco-runnable" is the best name? ({monaco-run}?)
• Any better way to import code, and how to import local code?

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	cf4c5aa
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/65ea3e0c176bc2000886bf76
😎 Deploy Preview	https://deploy-preview-1273--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[antfu]

Looks very nice! I like it!

We could have some docs for it, and maybe add one new demo to experiments with the runner step? (otherwise, we have no tests for it)