Configurer Monaco #

Par défaut, uniquement Monaco est activé uniquement en mode développement. Pour le faire fonctionner sur la version SPA, ajoutez monaco: true à vos configurations frontmatter.

Créer ./setup/monaco.ts avec le contenu suivant :

import { defineMonacoSetup } from '@slidev/types'

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

En savoir plus sur la configuration de Monaco.

Utilisation #

Pour utiliser Monaco dans vos diapositives, ajoutez simplement {monaco} à vos extraits de code :

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

console.log(plusOne.value) // 2

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

À

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

console.log(plusOne.value) // 2

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

Exporter #

Par défaut, Monaco fonctionnera UNIQUEMENT en mode dev. Si vous souhaitez également l'avoir disponible dans le SPA exporté, vous pouvez le configurer dans votre frontmatter :

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

Types d'installation automatique #

Lorsque vous utilisez TypeScript avec Monaco, les types de dépendances sont installés automatiquement côté client.

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

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

Dans l'exemple ci-dessus, assurez-vous simplement que vue et @vueuse/core sont installés localement en tant que dependencies / devDependencies, Slidev s'occupera du reste et votre éditeur fonctionnera !

Configure Themes #

Le thème est controllé par Slidev basé sur le thème clair/sombre. Si vous souhaitez le customiser, vous pouvez passer l'identifiant du thème dans la fonction setup :

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

export default defineMonacoSetup(() => {
  return {
    theme: {
      dark: 'vs-dark',
      light: 'vs',
    },
  }
})

Si vous souhaitez charger des thèmes customisés :

import { defineMonacoSetup } from '@slidev/types'

// change to your themes
import dark from 'theme-vitesse/themes/vitesse-dark.json'
import light from 'theme-vitesse/themes/vitesse-light.json'

export default defineMonacoSetup((monaco) => {
  monaco.editor.defineTheme('vitesse-light', light as any)
  monaco.editor.defineTheme('vitesse-dark', dark as any)

  return {
    theme: {
      light: 'vitesse-light',
      dark: 'vitesse-dark',
    },
  }
})

Si vous créez un thème pour Slidev, utilisez dynamiquement import() au sein de la fonction de setup afin d'avoir le meilleur résultat d'arborescence et de fractionnement de code possible.