Ρυθμίστε Monaco
Περιβάλλον: client
Δημιουργήστε ./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'
}
}
})