Ρυθμίστε Monaco #

Δημιουργήστε ./setup/monaco.ts με το εξής περιεχόμενο:

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // χρησιμοποιήστε `monaco` για να το ρυθμίσετε
})

Μάθετε περισσότερα για την ρύθμιση του Monaco.

Χρήση #

Για να χρησιμοποιήσετε το Monaco στις διαφάνειές σας, απλά προσθέστε {monaco} στα αποσπάσματα του κώδικά σας:

//```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
//```

Εξαγωγή #

Από προεπιλογή, το Monaco θα λειτουργήσει ΜΟΝΟ σε λειτουργία dev. Αν θέλετε να το έχετε διαθέσιμο στο εξαγόμενο SPA, ρυθμίστε το στο frontmatter σας:

---
monaco: true # προεπιλεγμένο "dev"
---

Αυτόματη Εγκατάσταση Τύπων #

Όταν χρησιμοποιείτε TypeScript με το Monaco, οι τύποι εξαρτήσεων θα εγκατασταθούν αυτόματα στο client-side.

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

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

Στο παραπάνω παράδειγμα, βεβαιωθείτε ότι τα vue και @vueuse/core είναι εγκατεστημένα τοπικά ως dependencies / devDependencies, το Slidev θα αναλάβει τα υπόλοιπα, ώστε οι τύποι να λειτουργούν αυτόματα για τον συντάκτη!

Ρύθμιση Θεμάτων #

Το θέμα ελέγχεται από το Slidev με βάση το φωτεινό/σκοτεινό θέμα. Αν θέλετε να το προσαρμόσετε, μπορείτε να περάσετε το id του θέματος στη συνάρτηση setup:

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

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

Αν θέλετε να φορτώσετε προσαρμοσμένα θέματα:

import { defineMonacoSetup } from '@slidev/types'

// αλλάξετε στα θέματά σας
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',
    },
  }
})

Εάν δημιουργείτε ένα θέμα για το Slidev, χρησιμοποιήστε δυναμικά import() μέσα στη συνάρτηση setup για να έχετε καλύτερα αποτελέσματα σε tree-shaking και code-splitting.

Ρύθμιση του Συντάκτη #

Διαθέσιμο από v0.43.0

Αν θέλετε να προσαρμόσετε τον συντάκτη Monaco, μπορείτε να περάσετε ένα object editorOptions που ταιριάζει με τον ορισμό Monaco IEditorOptions.

//```ts {monaco} { editorOptions: { wordWrap:'on'} }
console.log('Γεια σου Κόσμε')
//```

Εναλλακτικά, αν θέλετε αυτές οι επιλογές να εφαρμόζονται σε κάθε περίσταση Monaco, μπορείτε να τις επιστρέψετε στη συνάρτηση defineMonacoSetup

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

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