Ξεκινώντας
Το Slidev (slide + dev, /slaɪdɪv/) είναι ένας διαδικτυακός δημιουργός και παρουσιαστής διαφανειών. Είναι σχεδιασμένο για προγραμματιστές ώστε να εστιάζουν στη συγγραφή υλικού σε Markdown έχοντας παράλληλα τη δύναμη του HTML και των Vue components για να παρέχουν τέλεια layouts και σχεδιασμούς με ενσωματωμένες διαδραστικές επιδείξεις στις παρουσιάσεις τους.
Χρησιμοποιεί ένα πλούσιο σε δυνατότητες αρχείο markdown για τη δημιουργία όμορφων διαφανειών με μια άμεση εμπειρία επαναφόρτωσης, μαζί με πολλές ενσωματωμένες λειτουργίες, όπως live coding, εξαγωγή σε PDF, καταγραφή παρουσιάσεων κ.ο.κ. Εφόσον λειτουργεί με τη βοήθεια του διαδικτύου, μπορείτε να κάνετε οτιδήποτε με το Slidev - οι δυνατότητες είναι απεριόριστες.
Μπορείτε να μάθετε περισσότερα για το σκεπτικό πίσω από το έργο στην ενότητα Γιατί Slidev.
Δυνατότητες
- 📝 Βασισμένο στο Markdown - χρησιμοποιήστε τους αγαπημένους σας συντάκτες και ροή εργασίας
- 🧑💻 Φιλικό προς Προγραμματιστές - ενσωματωμένοι επισημαντήρες σύνταξης, live coding, κτλ.
- 🎨 Θεματοποιήσιμο - θέματα μπορούν να μοιραστούν και να χρησιμοποιηθούν με πακέτα npm
- 🌈 Stylish - on-demand εργαλεία μέσω των UnoCSS.
- 🤹 Διαδραστικό - απρόσκοπτη ενσωμάτωση Vue components
- 🎙 Λειτουργία Παρουσιαστή - χρησιμοποιήστε ένα άλλο παράθυρο ή ακόμα και το τηλέφωνό σας για να ελέγξετε τις διαφάνειές σας
- 🎨 Ζωγραφική - ζωγραφίστε και σημειώστε πάνω στις διαφάνειές σας
- 🧮 LaTeX - ενσωματωμένη υποστήριξη μαθηματικών εξισώσεων LaTeX
- 📰 Διαγράμματα - δημιουργεί διαγράμματα με περιγραφές κειμένου
- 🌟 Εικονίδια - απευθείας πρόσβαση σε εικονίδια από οποιοδήποτε σύνολο εικονιδίων
- 💻 Συντάκτες - ενσωματωμένος συντάκτης, ή επέκταση για το VS Code
- 🎥 Καταγραφή Παρουσίασης - ενσωματωμένη καταγραφή παρουσίασης και προβολή κάμερας
- 📤 Φορητό - εξαγωγή σε PDF, PNGs, ή ακόμα και σε ένα φιλοξενήσιμο SPA
- ⚡️ Γρήγορο - άμεση επαναφόρτωση με τη βοήθεια του Vite
- 🛠 Hackable - χρησιμοποιώντας πρόσθετα Vite, Vue components, ή οποιαδήποτε πακέτα npm
Δημιουργία σκελετού για την Πρώτη Σας Παρουσίαση
Δοκιμάστε το Online
Ξεκινήστε το Slidev απευθείας στο πρόγραμμα περιήγησής σας: sli.dev/new
Δημιουργήστε Τοπικά
npm init slidev@latest
yarn create slidev
pnpm 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 στο οδηγός σύνταξης.
Στοίβα Τεχνολογίας
Το Slidev λειτουργεί με το συνδυασμό αυτών των εργαλείων και τεχνολογιών.
- Vite - Ένα εξαιρετικά γρήγορο frontend tooling
- Vue 3 με Markdown - Συγκεντρωθείτε στο υλικό έχοντας παράλληλα τη δύναμη του HTML και των Vue components όποτε χρειάζεται.
- UnoCSS - On-demand utility-first CSS framework, σχεδιάστε τις διαφάνειές σας με άνεση
- Shiki, Monaco Editor - Πρώτης κατηγορίας υποστήριξη αποσπασμάτων κώδικα με δυνατότητα live coding
- RecordRTC - Ενσωματωμένη καταγραφή παρουσίασης και προβολή κάμερας
- VueUse οικογένεια -
@vueuse/core
,@vueuse/head
,@vueuse/motion
, κτλ. - Iconify - Συλλογή εικονιδίων.
- Drauu - Υποστήριξη ζωγραφικής και σημειώσεων
- KaTeX - Μαθηματική απεικόνιση LaTeX.
- Mermaid - Κειμενικά Διαγράμματα.