Erste Schritte
Überblick
Slidev (slide + dev, /slʌɪdɪv/) ist ein Web-basiertes Tool zum Erstellen und Präsentieren von Präsentationen. Slidev wurde für Entwickler entwickelt und setzt den Fokus auf das Verfassen von Inhalten in Markdown, während HTML und leistungsfähige Vue Komponenten pixelgenaue Designs und Layouts mit eingebetteten interaktiven Demos für deine Präsentation liefern.
Slidev verwendet eine funktionsreiche Markdown Datei um schöne Folien mit sofortigem Wiederladeerlebnis und vielen anderen Integrationen, wie Live-Coding, PDF-Export oder Präsentationsaufzeichnung zu generieren. Da Slidev über Web-Technologien läuft ist so gut wie alles möglich - die Möglichkeiten sind endlos.
Weitere Informationen über den Hintergrund von Slidev sind im Warum Slidev Abschnitt zu finden.
Funktionen
- 📝 Markdown-basiert - benutze deinen Lieblingseditor und Arbeitsablauf
- 🧑💻 Entwickler freundlich - integrierte Syntax Hervorhebung, live Coding, etc.
- 🎨 Anpassbarer Stil - Themen können geteilt und via npm packages genutzt werden
- 🌈 Stylish - Windi CSS on-demand utilities und einfach zu benutzende, eingebttete Stylesheets
- 🤹 Interaktiv - eigene Vue Komponenten
- 🎙 Moderatoren Modus - nutze ein anderes Fenster oder deine Handy um deine Präsentation zu steuern
- 🎨 Drawing - draw and annotate on your slides
- 🧮 LaTeX - integrierte Unterstützung für mathematische LaTeX Gleichungen
- 📰 Diagramme - erstelle Diagramme mit Beschriftungen
- 🌟 Icons - direkter Zugriff auf Icons von jedem Iconset
- 💻 Editors - integrierter Editor, oder extension für VS Code
- 🎥 Aufzeichnungen - integrierte Aufnahme und Kameraansicht
- 📤 Portabel - exportiere in PDF, PNG oder hostbare SPA
- ⚡️ Blitzschnell - sofortiges Nachladen durch Vite
- 🛠 Hackbar - nutze Vite plugins, Vue Komponenten, oder ein beliebiges npm package
Tech-Stack
Slidev wird durch die Kombination dieser Tools und Technologien ermöglicht:
- Vite - Ein extrem schnelles Frontend-Tool
- Vue 3 powered Markdown - Konzentriere dich auf den Inhalt, während die Power von HTML und Vue Komponenten immer an deiner Seite ist
- Windi CSS - On-Demand Utility-First CSS Framework, style deine Folien mit einer Lichtigkeit
- Prism, Shiki, Monaco Editor - Erstlassige Code-Snippet-Unterstützung mit Live-Coding Fähigkeit
- RecordRTC - Integrierte Aufnahmeunterstützung mit Kameraansicht
- VueUse Familie -
@vueuse/core,@vueuse/head,@vueuse/motion, etc. - Iconify - Iconset Sammlung.
- Drauu - Drawing and annotations support
- KaTeX - LaTeX Formeln rendern.
- Mermaid - Textbasierte Diagramme.
Die 1. Präsentation
Online ausprobieren
Lokal erstellen
Mit NPM:
$ npm init slidev
Mit Yarn:
$ yarn create slidev
Folge den Anweisungen und beginne mit dem Erstellen der Folien. Lies dir die Syntaxanleitung für mehr Informationen über den Syntax durch.
Command Line Interface
In einem Projekt, wo Slidev installiert ist, kann Slidev über den slidev Befehl in den npm Skripten verwendet werden.
{
"scripts": {
"dev": "slidev", // start dev server
"build": "slidev build", // build for production SPA
"export": "slidev export" // export slides to pdf
}
}
Andernfalls kann Slidev mit npx verwendet werden.
$ npx slidev
Führe slidev --help aus, um alle verfügbaren Optionen zu erhalten.
Markdown Syntax
Slidev liest die slides.md Datei in deinem Projektstamm und wandelt sie in eine Präsentation um. Bei Änderungen wird deine Präsentation sofort aktualisiert. Ein Beispiel:
# Slidev
Hallo Welt
---
# Seite 2
Codeblöcke zum direkten hervorheben verwenden
//`ts console.log('Hallo, Welt!') //`
---
# Seite 3
Erfahre mehr über Slidev's Markdown Syntax.