Configure Monaco

Environment: client

This setup function will only run on client side. Make sure the browser compatibility when importing packages.

Create ./setup/monaco.ts with the following content:

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // use `monaco` to configure
})

Learn more about configuring Monaco.

Usage

To use Monaco in your slides, simply append {monaco} to your code snippets:

```js {monaco}
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error
```

TypeScript Types

When using TypeScript with Monaco, types for dependencies will be installed to the client-side automatically.

```ts {monaco}
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'

const counter = ref(0)
```

In the example above, make sure vue and @vueuse/core are installed locally as dependencies / devDependencies, Slidev will handle the rest to get the types working for the editor automatically. When deployed as SPA, those types will also be bundled for static hosting.

Additional Types

Slidev will scan all the Monaco code blocks in your slides and import the types for those used libraries for you. In case it missed some, you can explicitly specify extra packages to import the types for:

---
monacoTypesAdditionalPackages:
  - lodash-es
  - foo
---

Auto Type Acquisition

You can optionally switch to load types from CDN by setting the following headmatter:

---
monacoTypesSource: ata
---

This feature is powered by @typescript/ata and runs completely on the client-side.

Configure Themes

Since v0.48.0, Monaco will reuse the Shiki theme you configured in Shiki's setup file, powered by @shikijs/monaco. You don't need to worry about it anymore and it will have a consistent style with the rest of your code blocks.

Configure the Editor

Available since v0.43.0

If you would like to customize the Monaco editor you may pass an editorOptions object that matches the Monaco IEditorOptions definition.

```ts {monaco} { editorOptions: { wordWrap:'on'} }
console.log('HelloWorld')
```

Alternatively if you would like these options to be applied to every Monaco instance, you can return them in the defineMonacoSetup function

// ./setup/monaco.ts
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => {
  return {
    editorOptions: {
      wordWrap: 'on'
    }
  }
})

Disabling

Since v0.48.0, the Monaco editor is enabled by default and only be bundled when you use it. If you want to disable it, you can set monaco to false in the frontmatter of your slide:

---
monaco: false # can also be `dev` or `build` tp conditionally enable it
---

Configure Code Runners

To configure how the Monaco Runner runs the code, or to add support for custom languages, please reference to Configure Code Runners.