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

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

Ρυθμίστε Shiki

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

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

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

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

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

Αν θέλετε να προσθέσετε προσαρμοσμένο θέμα ή γλώσσα (γραμματική/θέματα TextMate σε JSON), μπορείτε να τα εισαγάγετε στο αρχείο ρυθμίσεων:

/* ./setup/shiki.ts */
import { defineShikiSetup } from '@slidev/types'
import customTheme from './customTheme.tmTheme.json'
import customLanguage from './customLanguage.tmLanguage.json'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: customTheme,
      light: 'min-light',
    },
    langs: [
      'js',
      'typescript',
      'cpp',
      customLanguage,
      // ...
    ],
    transformers: [
      // ...
    ],
  }
})

Δείτε τις Ενσωματωμένες γλώσσες και Ενσωματωμένα θέματα και ανατρέξτε στις οδηγίες του Shiki για περισσότερες πληροφορίες.

INFO

Προς το παρόν, το Shiki Magic Move δεν υποστηρίζει μετασχηματιστές.

Ρυθμίστε Prism

WARNING

Η υποστήριξη του Prism έχει λήξει και θα αφαιρεθεί στο μέλλον. Παρακαλούμε χρησιμοποιήστε το Shiki αντί αυτού.

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