Configurar Monaco

Entorno: client
Esta función de configuración sólo se ejecutará en el lado del cliente. Asegúrate de la compatibilidad del navegador al importar los paquetes.

Por defecto, Mónaco sólo está habilitado en el modo 'dev'. Para que funcione en el modo SPA, añade monaco: true a tu configuración de frontmatter.

Crea ./setup/monaco.ts con el siguiente contenido:

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // usa `monaco` para configurarlo
})

Revisa más información sobre la configuración de Mónaco.

Uso

Para usar Monaco en tus diapositivas, simplemente añade {monaco} a tus fragmentos de código:

//```js
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error
//```

A

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

console.log(plusOne.value) // 2

plusOne.value++ // error
//```

Exportando

Por defecto, Monaco sólo funcionará en modo dev. Si también quieres tenerlo disponible en el SPA exportado, puedes configurarlo en tu frontmatter:

---
monaco: true # default "dev"
---

Instalación automática de tipos

Cuando se utiliza TypeScript con Monaco, los tipos para las dependencias se instalarán en el lado del cliente automáticamente.

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

const counter = ref(0)
//```

En el ejemplo anterior, solo asegúrate de que vue y @vueuse/core están instalados localmente bajo dependencies / devDependencies, ¡Slidev se encargará del resto y tu editor funcionará mágicamente!