Commencer #

Aperçu #

Slidev ^{(slide + dev, /slʌɪdɪv/)} est un créateur et présentateur de diapositives basé sur le Web. Il est conçu pour que les développeurs se concentrent sur l'écriture de contenu dans Markdown tout en ayant la puissance des composants HTML et Vue pour fournir des mises en page et des conceptions parfaites au pixel près avec des démos interactives intégrées dans vos présentations.

Il utilise un fichier de démarque riche en fonctionnalités pour générer de belles diapositives avec une expérience de rechargement instantané, ainsi que de nombreuses intégrations intégrées telles que le codage en direct, l'exportation de PDF, l'enregistrement de présentations, etc. Comme il est alimenté par le Web, vous pouvez tout faire avec Slidev - les possibilités sont infinies.

Vous pouvez en savoir plus sur la raison d'être du projet dans la section Pourquoi Slidev.

Caractéristiques #

• 📝 basé sur Markdown - utilisez vos éditeurs et flux de travail préférés
• 🧑‍💻 Convivial pour les développeurs - coloration syntaxique intégrée, codage en direct, etc.
• 🎨 Themable - le thème peut être partagé et utilisé avec les packages npm
• 🌈 Élégant - utilitaires à la demande via Windi CSS ou [UnoCSS](https:// github.com/unocss/unocss).
• 🤹 Interactive - intégration transparente des composants Vue
• 🎙 Mode Présentateur - utilisez une autre fenêtre, ou même votre téléphone pour contrôler vos diapositives
• 🎨 Dessin - dessinez et annotez sur vos diapositives
• 🧮 LaTeX - prise en charge intégrée des équations mathématiques LaTeX
• 📰 Diagrams - crée des diagrammes avec des descriptions textuelles
• 🌟 Icons - Accès direct aux icônes de n'importe quel jeu d'icônes
• 💻 Editors - éditeur intégré, ou extension pour VS Code
• 🎥 Enregistrement - enregistrement intégré et vue caméra
• 📤 Portable - exportez en PDF, PNG ou même un SPA hébergeable
• ⚡️ Fast - rechargement instantané alimenté par Vite
• 🛠 Hackable - en utilisant les plugins Vite, les composants Vue ou tout package npm

Pile technologique #

Slidev est rendu possible en combinant ces outils et technologies.

• Vite - Un outil frontal extrêmement rapide
• Vue 3 propulsé Markdown - Concentrez-vous sur le contenu tout en ayant la puissance des composants HTML et Vue chaque fois que nécessaire
• Windi CSS ou UnoCSS - Utilitaire à la demande-premier cadre CSS, stylisez vos diapositives à l'aise
• Prism, Shiki, [Monaco Editor](https://github.com/Microsoft/ monaco-editor) - Prise en charge des extraits de code de première classe avec capacité de codage en direct
• RecordRTC - Enregistrement intégré et vue caméra
• Famille VueUse - @vueuse/core, [@vueuse/head](https:// github.com/vueuse/head), @vueuse/motion, etc.
• [Iconify] (https://iconify.design/) - Collection d'ensembles d'icônes.
• Drauu - Prise en charge du dessin et des annotations
• KaTeX - Rendu mathématique LaTeX.
• [Mermaid] (https://mermaid-js.github.io/mermaid) - Diagrammes textuels.

Création de votre première présentation #

Essayez en ligne #

sli.dev/new

Créer localement #

Avec NPM:

$ npm init slidev

Avec Yarn :

$ yarn create slidev

Suivez les instructions et commencez à créer vos diapositives maintenant ! Pour plus de détails sur la syntaxe de démarquage, lisez le guide de syntaxe.

Interface de ligne de commande #

Dans un projet où Slidev est installé, vous pouvez utiliser le binaire slidev dans vos scripts npm.

{
  "scripts": {
    "dev": "slidev", // lancer le serveur de développement
    "build": "slidev build", // construire pour la production SPA
    "export": "slidev export" // exporter les diapositives en pdf
  }
}

Sinon, vous pouvez l'utiliser avec npx

$ npx slidev

Exécutez slidev --help pour plus d'options disponibles.

Syntaxe de Markdown #

Slidev lit votre fichier slides.md sous la racine de votre projet et les convertit en diapositives. Chaque fois que vous y apportez des modifications, le contenu des diapositives est mis à jour immédiatement. Par exemple :

# Slidev

Hello World

---

# Page 2

Utilisez directement des blocs de code pour la mise en évidence

//```ts
console.log('Hello, World!')
//```

---

# Page 3

En savoir plus sur la syntaxe Slidev Markdown dans le guide de syntaxe.