Ξεκινώντας

Σύνοψη

Το Slidev (slide + dev, /slʌɪdɪv/) είναι ένας διαδικτυακός δημιουργός και παρουσιαστής διαφανειών. Είναι σχεδιασμένο για προγραμματιστές ώστε να εστιάζουν στη συγγραφή υλικού σε Markdown έχοντας παράλληλα τη δύναμη του HTML και των Vue components για να παρέχουν τέλεια layouts και σχεδιασμούς με ενσωματωμένες διαδραστικές επιδείξεις στις παρουσιάσεις τους.

Χρησιμοποιεί ένα πλούσιο σε δυνατότητες αρχείο markdown για τη δημιουργία όμορφων διαφανειών με μια άμεση εμπειρία επαναφόρτωσης, μαζί με πολλές ενσωματωμένες λειτουργίες, όπως live coding, εξαγωγή σε PDF, καταγραφή παρουσιάσεων κ.ο.κ. Εφόσον λειτουργεί με τη βοήθεια του διαδικτύου, μπορείτε να κάνετε οτιδήποτε με το Slidev - οι δυνατότητες είναι απεριόριστες.

Μπορείτε να μάθετε περισσότερα για το σκεπτικό πίσω από το έργο στην ενότητα Γιατί Slidev.

Δυνατότητες

  • 📝 Βασισμένο στο Markdown - χρησιμοποιήστε τους αγαπημένους σας συντάκτες και ροή εργασίας
  • 🧑‍💻 Φιλικό προς Προγραμματιστές - ενσωματωμένοι επισημαντήρες σύνταξης, live coding, κτλ.
  • 🎨 Θεματοποιήσιμο - θέματα μπορούν να μοιραστούν και να χρησιμοποιηθούν με πακέτα npm
  • 🌈 Stylish - Windi CSS on-demand εργαλεία, εύκολα στη χρήση ενσωματωμένα stylesheets
  • 🤹 Διαδραστικό - απρόσκοπτη ενσωμάτωση Vue components
  • 🎙 Λειτουργία Παρουσιαστή - χρησιμοποιήστε ένα άλλο παράθυρο ή ακόμα και το τηλέφωνό σας για να ελέγξετε τις διαφάνειές σας
  • 🎨 Ζωγραφική - ζωγραφίστε και σημειώστε πάνω στις διαφάνειές σας
  • 🧮 LaTeX - ενσωματωμένη υποστήριξη μαθηματικών εξισώσεων LaTeX
  • 📰 Διαγράμματα - δημιουργεί διαγράμματα με περιγραφές κειμένου
  • 🌟 Εικονίδια - απευθείας πρόσβαση σε εικονίδια από οποιοδήποτε σύνολο εικονιδίων
  • 💻 Συντάκτες - ενσωματωμένος συντάκτης, ή επέκταση για το VS Code
  • 🎥 Καταγραφή Παρουσίασης - ενσωματωμένη καταγραφή παρουσίασης και προβολή κάμερας
  • 📤 Φορητό - εξαγωγή σε PDF, PNGs, ή ακόμα και σε ένα φιλοξενήσιμο SPA
  • ⚡️ Γρήγορο - άμεση επαναφόρτωση με τη βοήθεια του Vite
  • 🛠 Hackable - χρησιμοποιώντας πρόσθετα Vite, Vue components, ή οποιαδήποτε πακέτα npm

Στοίβα Τεχνολογίας

Το Slidev λειτουργεί με το συνδυασμό αυτών των εργαλείων και τεχνολογιών.

  • Vite - Ένα εξαιρετικά γρήγορο frontend tooling
  • Vue 3 με Markdown - Συγκεντρωθείτε στο υλικό έχοντας παράλληλα τη δύναμη του HTML και των Vue components όποτε χρειάζεται.
  • Windi CSS - On-demand utility-first CSS framework, σχεδιάστε τις διαφάνειές σας με άνεση
  • Prism, Shiki, Monaco Editor - Πρώτης κατηγορίας υποστήριξη αποσπασμάτων κώδικα με δυνατότητα live coding
  • RecordRTC - Ενσωματωμένη καταγραφή παρουσίασης και προβολή κάμερας
  • VueUse οικογένεια - @vueuse/core, @vueuse/head, @vueuse/motion, κτλ.
  • Iconify - Συλλογή εικονιδίων.
  • Drauu - Υποστήριξη ζωγραφικής και σημειώσεων
  • KaTeX - Μαθηματική απεικόνιση LaTeX.
  • Mermaid - Κειμενικά Διαγράμματα.

Δημιουργία σκελετού για την Πρώτη Σας Παρουσίαση


Δοκιμάστε το Online

sli.dev/new

Δημιουργήστε Τοπικά

Με NPM:

$ npm init slidev

Με Yarn:

$ yarn create slidev

Ακολουθήστε τις οδηγίες και αρχίστε να δημιουργείτε τις διαφάνειές σας τώρα! Για περισσότερες λεπτομέρειες σχετικά με τη σύνταξη markdown, διαβάστε τον οδηγό σύνταξης.

Command Line Interface

Σε ένα έργο όπου το Slidev είναι εγκατεστημένο, μπορείτε να χρησιμοποιήσετε το slidev binary στα npm scripts σας.

{
  "scripts": {
    "dev": "slidev", // εκκίνηση του διακομιστή dev
    "build": "slidev build", // κατασκευή για production SPA
    "export": "slidev export" // εξαγωγή διαφανειών σε pdf
  }
}

Διαφορετικά, μπορείτε να το χρησιμοποιήσετε με npx

$ npx slidev

Τρέξτε slidev --help για περισσότερες διαθέσιμες επιλογές.

Σύνταξη Markdown

Το Slidev διαβάζει το αρχείο slides.md στη ρίζα του έργου σας και τα μετατρέπει σε διαφάνειες. Κάθε φορά που κάνετε αλλαγές σε αυτό, το περιεχόμενο των διαφανειών θα ενημερώνεται αμέσως. Για παράδειγμα:

# Slidev

Γεια σου κόσμε

---

# Σελίδα 2

Άμεση χρήση code blocks για επισήμανση

//```ts
console.log('Γεια σου, κόσμε!')
//```

---

# Σελίδα 3

Διαβάστε περισσότερα για τη σύνταξη Markdown του Slidev στο οδηγός σύνταξης.