Επισημαντήρες

Το Slidev περιλαμβάνει δύο επισημαντήρες σύνταξης για να επιλέξετε:

• Prism
• Shiki

Το Prism είναι ένας από τους πιο δημοφιλής επισημαντήρες σύνταξης. Η επισήμανση γίνεται με την προσθήκη token classes στον κώδικα και χρωματίζεται με τη χρήση CSS. Μπορείτε να περιηγηθείτε στα επίσημα θέματά τους, ή δημιουργήστε/προσαρμόστε ένα μόνοι σας πολύ εύκολα χρησιμοποιώντας το prism-theme-vars.

Το Shiki είναι ένας TextMate grammar-powered επισημαντήρας σύνταξης. Δημιουργεί χρωματιστά tokens, ώστε να μην απαιτείται επιπλέον CSS. Δεδομένου ότι έχει εξαιρετική υποστήριξη γραμματικής, τα παραγόμενα χρώματα είναι πολύ ακριβή, ακριβώς όπως αυτά που θα δείτε στο VS Code. Το Shiki επιπλέον περιλαμβάνει ένα σωρό από ενσωματωμένα θέματα. Στο Slidev, παρέχουμε επίσης την υποστήριξη TwoSlash είναι επίσης ενσωματωμένη.

Το Shikiji είναι μια επανεγγραφή του Shiki σε ESM με πολλές βελτιώσεις και νέες δυνατότητες. Μπορείτε να έχετε μετασχηματιστές βασισμένους σε AST για να προσαρμόσετε τον τρόπο με τον οποίο απεικονίζεται ο κώδικας. Και η υποστήριξη TwoSlash έχει επίσης ενσωματωθεί.

Τα θέματα Slidev συνήθως υποστηρίζουν και Prism και Shiki, αλλά ανάλογα με το θέμα που χρησιμοποιείτε, μπορεί να υποστηρίζει μόνο ένα από αυτά.

Όταν έχετε τη δυνατότητα επιλογής, ο συμβιβασμός είναι βασικά:

• Prism για ευκολότερη προσαρμογή
• Shiki για ακριβή επισήμανση

Το Slidev χρησιμοποιεί το Shiki από προεπιλογή από την έκδοση v0.47. Μπορείτε να χρησιμοποιήσετε Prism προσθέτοντας τα ακόλουθα στο slides.md σας:

---
highlighter: Prism
---

Ρυθμίστε Shiki

Περιβάλλον: node

Αυτή η λειτουργία ρύθμισης θα εκτελεστεί μόνο σε περιβάλλον Node.js, μπορείτε να έχετε πρόσβαση στο API του Node.

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

/* ./setup/shiki.ts */
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'min-dark',
      light: 'min-light',
    },
    transformers: [
      // ...
    ]
  }
})

Ανατρέξτε στη σελίδα του Shiki για όλες τις διαθέσιμες επιλογές θέματος.

Ρυθμίστε Prism

Για να ρυθμίσετε το Prism σας, μπορείτε απλά να εισαγάγετε το CSS του θέματος ή να χρησιμοποιήσετε το prism-theme-vars για να ρυθμίσετε τα θέματα τόσο για τη φωτεινή όσο και για τη σκοτεινή λειτουργία. Ανατρέξτε στις οδηγίες του για περισσότερες λεπτομέρειες.