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
  • 🧑‍💻 Adapté aux développeurs - coloration syntaxique intégrée, codage en direct, etc.
  • 🎨 Thème - le thème peut être partagé et utilisé avec les packages npm
  • 🌈 Stylisé - Windi CSS utilitaires à la demande, feuilles de style intégrées faciles à utiliser
  • 🤹 Interactif - 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
  • 🧮 LaTeX - Prise en charge des équations mathématiques LaTeX intégrées
  • 📰 Diagrammes - Crée des diagrammes avec des descriptions textuelles
  • 🌟 Icônes - Accès aux icônes depuis n'importe quel jeu d'icônes directement
  • 💻 Éditeurs - Editeur intégré, ou extension pour VS Code
  • 🎥 Enregistrement - enregistrement intégré et vue de la caméra
  • 📤 Portable - exportation au format PDF, PNG ou même un SPA hébergeable
  • ⚡️ Rapide - rechargement instantané alimenté par Vite
  • 🛠 Hackable - en utilisant les plugins Vite, les composants Vue ou tout autre package npm

Pile technologique

Slidev est rendu possible en combinant ces outils et technologies.

  • Vite - Un outil frontal extrêmement rapide
  • Vue 3 powered Markdown - Concentrez-vous sur le contenu tout en ayant la puissance des composants HTML et Vue chaque fois que nécessaire
  • Windi CSS - Framework CSS à la demande, premier utilitaire, stylisez vos diapositives à l'aise
  • Prism, Shiki, 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 de la caméra
  • Famille VueUse - @vueuse/core, @vueuse/head, @vueuse/motion, etc.
  • Iconify - Collection d'icônes.
  • KaTeX - Rendu mathématique LaTeX.
  • Mermaid - Diagrammes textuels.

Création de votre première présentation

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.