Aller au contenu principal

Slidev

Slidev est un outil qui permet de créer des présentations interactives et dynamiques. Slidev se distingue des autres logiciels de présentation par son utilisation de technologies web modernes telles que Markdown et Vue.js, permettant une flexibilité et une personnalisation inégalées.

Que vous soyez un développeur cherchant à intégrer des composants interactifs dans vos présentations ou un utilisateur souhaitant simplement créer des diapositives élégantes et fonctionnelles, Slidev offre une solution puissante et accessible.

Historique​

Slidev est né de la volonté de créer une alternative moderne aux outils de présentation traditionnels comme PowerPoint et Keynote. L'idée derrière Slidev était de combiner la simplicité de Markdown avec la puissance de Vue.js pour offrir une plateforme de présentation flexible et interactive.

Slidev a été développé par Anthony Fu, un développeur passionné par l'amélioration des outils de présentation existants. Très vite, Slidev a gagné en popularité au sein de la communauté des développeurs grâce à sa capacité à intégrer du code, des graphiques et des animations de manière fluide et intuitive.

Depuis son lancement initial, Slidev a évolué rapidement grâce aux contributions de la communauté open-source. Les développeurs ont ajouté de nombreuses fonctionnalités, comme le mode présentateur, l'exportation en PDF ou en PPTX et la prise en charge de plugins, permettant ainsi à Slidev de s'adapter à divers besoins et scénarios d'utilisation.

Fonctionnalités​

Slidev se distingue par une multitude de fonctionnalités innovantes qui en font un outil de choix pour la création de présentations interactives et dynamiques. Voici une vue d'ensemble des principales fonctionnalités de Slidev :

Syntaxe Markdown​

Slidev utilise la syntaxe Markdown pour créer des diapositives, ce qui simplifie grandement le processus de création. Vous pouvez facilement structurer vos présentations avec des titres, des listes, des images, et du texte formaté sans avoir besoin d'un éditeur visuel complexe.

Intégration de Code​

Pour les développeurs, Slidev offre une intégration fluide de code avec une coloration syntaxique automatique. Cela permet de présenter des extraits de code de manière claire et lisible.

Support de Vue.js​

Slidev permet d'intégrer des composants Vue.js directement dans vos diapositives, ouvrant la porte à des présentations interactives et dynamiques. Par exemple, vous pouvez ajouter des formulaires, des graphiques, et des animations.

Mode Présentateur​

Le mode présentateur de Slidev est une fonctionnalité puissante qui offre une vue dédiée pour les présentateurs, incluant des notes, une minuterie, et un aperçu des diapositives suivantes. Cela permet de gérer efficacement le déroulement de la présentation.

Exportation​

Slidev permet d'exporter vos présentations en plusieurs formats, tels que PDF et sites web statiques, facilitant ainsi le partage et la diffusion de vos travaux.

Animation et Transitions​

Slidev intègre des animations et des transitions fluides pour rendre vos présentations plus engageantes. Utilisez des bibliothèques comme Animate.css pour ajouter des effets visuels à vos diapositives.

Thèmes et Plugins​

Slidev offre un support extensif pour les thèmes et plugins, permettant de personnaliser l'apparence et les fonctionnalités de vos présentations. Vous pouvez utiliser des thèmes prédéfinis ou créer les vôtres pour un look unique.

Collaboration et Partage​

Grâce à la nature open-source de Slidev, il est facile de collaborer avec d'autres utilisateurs et de partager vos présentations en ligne. Vous pouvez héberger vos diapositives sur GitHub, Netlify, ou d'autres plateformes de déploiement.

Installation de Slidev​

Pour commencer à utiliser Slidev, il est essentiel de l'installer correctement. Ce chapitre vous guidera à travers les étapes nécessaires pour installer Slidev globalement et localement sur votre machine.

Prérequis​

Avant d'installer Slidev, assurez-vous d'avoir Node.js et npm (Node Package Manager) installés sur votre machine. Vous pouvez télécharger et installer Node.js à partir du site officiel : nodejs.org.

L'installation de Slidev dans un répertoire est utile lorsque vous souhaitez gérer les dépendances de Slidev dans le contexte d'un projet spécifique. Cela permet de garder votre environnement de développement organisé et de minimiser les conflits de versions.

Créez un nouveau répertoire pour votre projet Slidev et initialisez un projet Node.js en exécutant les commandes suivantes :

mkdir mon-projet-slidev
cd mon-projet-slidev
npm init -y

Installez Slidev en tant que dépendance de développement dans votre projet en exécutant la commande suivante :

npm install @slidev/cli @slidev/theme-default

Pour vérifier que Slidev est installé correctement localement, exécutez la commande suivante dans le répertoire de votre projet :

npx slidev

Création de Présentations basiques​

Maintenant que Slidev est installé, il est temps de commencer à créer des présentations. Je ne vais détailler que les types que j'ai utilisés jusqu'à maintenant, mais sachez que la liste des possibilités est longue.

Structure de la présentation​

Slidev utilise certaines conventions de structure de répertoires pour minimiser la surface de configuration et rendre les extensions de fonctionnalité flexibles et intuitives.

your-slidev/
  ├── components/       # custom components
  ├── layouts/          # custom layouts
  ├── public/           # static assets
  ├── setup/            # custom setup / hooks
  ├── styles/           # custom style
  ├── index.html        # injections to index.html
  ├── slides.md         # the main slides entry
  └── vite.config.ts    # extending vite config

Tous sont optionnels.

Le fichier principal de votre projet Slidev est un fichier markdown. Par exemple : slides.md.

C'est dans ce fichier que vous écrivez le contenu de votre présentation. Chaque diapositive est séparée par une ligne contenant ---.

Exemple de Structure de Diapositives​

# Titre de la Présentation

---

# Introduction

Bienvenue à cette présentation sur **Slidev**.

---

# Deuxième Diapositive

Voici du contenu pour la deuxième diapositive.

---

# Troisième Diapositive

```javascript
console.log('Hello, Slidev!');
```

Ajout de Contenu​

Slidev vous permet d'ajouter une variété de contenus à vos diapositives, y compris du texte, des images, des liens et du code.

Texte​

Vous pouvez formater le texte en utilisant Markdown. Par exemple :

# Titre de la Diapositive

Voici du texte en **gras**, *italique*, et ~~barré~~.

- Point 1
- Point 2
- Point 3

Images​

Pour ajouter une image, utilisez la syntaxe Markdown suivante :

![Description de l'image](chemin/vers/image.png)

Liens​

Pour ajouter des liens, utilisez la syntaxe Markdown :

[Cliquez ici pour plus d'informations](https://example.com)

Code​

Pour afficher du code avec une coloration syntaxique, utilisez des blocs de code :

function hello() {
  console.log('Hello, Slidev!');
}

Ajouter des Notes du Présentateur​

Pour ajouter des notes qui seront visibles uniquement dans la vue du présentateur, utilisez la syntaxe note: après le séparateur de diapositive (---).

# Titre de la Diapositive

Contenu de la diapositive.

<!--
Tester les fonctionnalités de slidev
-->

Diagramme MerMaid​

Pour intégrer des diagrammes Mermaid dans vos présentations Slidev utilisez simplement cette syntaxe Markdown.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Animations​

Les animations dans Slidev permettent d'ajouter du dynamisme et de l'interactivité à vos présentations. En utilisant diverses directives et composants, vous pouvez contrôler l'apparition, la disparition et les transitions des éléments de vos diapositives. Ce chapitre vous guidera à travers les principales fonctionnalités d'animations offertes par Slidev.

v-click​

La directive v-click permet de rendre un élément visible après un certain nombre de clics. Par défaut, l'élément devient visible après un clic, mais vous pouvez personnaliser ce comportement.

<div v-click>Visible après 1 clic</div>
<div v-click="3">Visible après 3 clics</div>

v-clicks​

Le composant v-clicks applique automatiquement la directive v-click à tous ses enfants, ce qui est particulièrement utile pour les listes et les tables.

<v-clicks>

- Élément 1
- Élément 2
- Élément 3

</v-clicks>

Chaque élément de la liste deviendra visible successivement à chaque clic.

Positionnement des Animations​

Les animations peuvent être positionnées de manière relative ou absolue.

Position Relative​

Les valeurs relatives permettent de définir l'apparition d'un élément en fonction des clics précédents.

<div v-click>Visible après 1 clic</div>
<div v-click.at="+2">Visible après 3 clics</div>
Position Absolue​

Les valeurs absolues spécifient l'apparition exacte de l'élément après un certain nombre de clics.

<div v-click="3">Visible après 3 clics</div>

Utilisation de Rough Notation​

Slidev intègre Rough Notation pour permettre la mise en surbrillance des éléments avec différentes notations (souligné, cercle, etc.).

<span v-mark="{ color: '#234', type: 'circle' }">Texte important</span>

Utilisation de VueUse Motion​

Pour des animations de mouvement plus complexes, Slidev utilise VueUse Motion. Vous pouvez appliquer la directive v-motion à tout élément.

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }"
  :leave="{ x: 80 }"
>
  Slidev
</div>

Le texte "Slidev" se déplacera de -80px à sa position d'origine en entrant dans la diapositive et de 0 à 80px en sortant.

Transitions entre les Diapositives​

Slidev permet également de configurer des transitions entre les diapositives pour ajouter des effets visuels lorsqu'on passe d'une diapositive à une autre. Vous pouvez définir ces transitions dans les métadonnées de chaque diapositive ou globalement pour toute la présentation.

---
transition: slide-left
---

# Titre de la Diapositive

Contenu de la diapositive.

Utilisation des Layouts Intégrés​

Slidev offre une variété de layouts intégrés qui permettent de structurer et de styliser vos diapositives de manière cohérente et professionnelle. Utiliser les layouts intégrés facilite l'organisation de votre contenu et garantit une présentation visuellement attrayante.

Slidev propose plusieurs layouts intégrés, chacun conçu pour différents types de contenu et de présentations. Voici les principaux layouts disponibles :

  1. Default
  2. Cover
  3. Image
  4. Title
  5. Center
  6. Section
  7. Statement

Pour utiliser un layout dans une diapositive, vous devez spécifier le layout dans les métadonnées de la diapositive en utilisant la clé layout.

Exemples d'Utilisation des Layouts​

Le layout default est le layout par défaut utilisé par Slidev. Il offre une structure simple et polyvalente pour la plupart des contenus.

---
layout: default
---

# Titre de la Diapositive

Contenu de la diapositive.

Le layout cover est idéal pour les diapositives de titre ou d'introduction. Il centre le contenu et offre un style visuellement impactant.

---
layout: cover
---

# Titre de la Présentation

## Sous-titre ou Description

Le layout image permet d'afficher une image en plein écran avec une légende optionnelle.

---
layout: image
image: https://source.unsplash.com/random
caption: "Image Aléatoire d'Unsplash"
---

# Titre de la Diapositive

Le layout title est conçu pour afficher un titre centré avec une description en dessous.

---
layout: title
---

# Grand Titre

## Description ou Sous-titre

Le layout center centre tout le contenu de la diapositive, idéal pour les messages importants ou les citations.

---
layout: center
---

# Contenu Centré

Ce contenu est centré verticalement et horizontalement.

Le layout section est parfait pour introduire de nouvelles sections dans votre présentation. Il affiche un grand titre au centre de la diapositive.

---
layout: section
---

# Nouvelle Section

## Introduction de la Section

Le layout statement est utilisé pour mettre en avant une déclaration ou un point clé de votre présentation.

---
layout: statement
---

# Déclaration Importante

### Explication ou Détail Supplémentaire

Personnalisation des Layouts​

Vous pouvez également personnaliser les layouts en utilisant des classes CSS et des attributs pour ajuster leur apparence selon vos besoins.

Exemple de Personnalisation​

---
layout: cover
class: 'custom-cover'
---

# Titre Personnalisé

## Sous-titre Personnalisé

<style>
.custom-cover {
  background-color: #f0f0f0;
  color: #333;
}
</style>

Utilisation d'un Thème​

Les thèmes dans Slidev permettent de personnaliser l'apparence de vos présentations facilement. En utilisant des thèmes prédéfinis ou en créant vos propres thèmes, vous pouvez donner un style unique à vos diapositives. Ce chapitre vous guidera à travers les étapes nécessaires pour utiliser et personnaliser un thème dans Slidev.

Choisir un Thème​

Slidev propose plusieurs thèmes prédéfinis que vous pouvez utiliser immédiatement. Vous pouvez explorer ces thèmes dans la galerie de thèmes de Slidev.

Étape 1 : Installer un Thème​

Pour installer un thème, utilisez npm. Par exemple, pour installer le thème "seriph" :

npm install @slidev/theme-seriph

Étape 2 : Appliquer le Thème​

Après l'installation, appliquez le thème à votre présentation en ajoutant les métadonnées nécessaires dans votre fichier slides.md :

---
theme: seriph
---

Personnalisation d'un Thème​

Vous pouvez personnaliser davantage un thème en modifiant ses paramètres. Slidev permet d'ajuster les couleurs, les polices, et d'autres aspects du thème via le fichier slidev.config.js.

Créez ou modifiez le fichier slidev.config.js pour ajuster les paramètres du thème :

// slidev.config.js
export default {
  theme: 'seriph',
  themeConfig: {
    primary: '#5d8392',
    fonts: {
      sans: 'Roboto',
      serif: 'Merriweather',
      mono: 'Fira Code',
    },
  },
}

Exportation​

Une fois votre présentation Slidev terminée, vous pouvez l'exporter dans différents formats pour la partager facilement avec votre audience ou la diffuser en ligne. Slidev offre des options d'exportation en PDF ou en PowerPoint.

L'exportation en PDF est utile pour distribuer des copies imprimables de votre présentation ou pour permettre à votre audience de consulter les diapositives hors ligne. Pour exporter votre présentation Slidev en PDF, utilisez la commande suivante :

slidev export --format pdf terraform.md

Cette commande génère un fichier PDF de votre présentation dans le répertoire de votre projet. Vous pouvez configurer des options supplémentaires telles que la taille de la page et les marges en ajoutant des paramètres à la commande d'exportation.

Pour exporter une présentation au format PPTX utilisez la commande suivante :

slidev export --format pptx

Génération d'un site statique​

Créer une application Single Page Application (SPA) avec Slidev est un processus simple qui vous permet de déployer vos présentations en ligne, rendant ainsi votre contenu aisément accessible à un large public.

Exécutez la commande suivante dans votre terminal :

npx slidev build test.md

Cette commande créera un répertoire dist contenant les fichiers HTML, CSS et JavaScript nécessaires pour votre application SPA.

Mode Présentateur​

Le mode présentateur de Slidev est une fonctionnalité puissante qui améliore considérablement l'expérience de présentation en direct. Il offre des outils et des vues spécifiques pour le présentateur, permettant une gestion efficace du contenu et du temps pendant la présentation.

Activer le Mode Présentateur​

Pour activer le mode présentateur, lancez Slidev suivi du nom de votre fichier de présentation :

slidev terraform.md

Cette commande ouvre une fenêtre dans votre navigateur, mais regardez bien dans les liens générés, il y a d'autres liens, dont un est le mode présentateur :

  ●■▲
  Slidev  v0.49.11

  theme       ./theme
  css engine  unocss
  entry       /Users/srt20/Projets/outscale/slides/ansible.md

  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter/
  slides overview     > http://localhost:3030/overview/
  remote control      > pass --remote to enable

Vue du Présentateur​

La vue du présentateur est divisée en plusieurs sections pour une gestion optimale de la présentation :

  • Diapositive Actuelle : Affiche la diapositive actuellement visible par votre audience.
  • Diapositive Suivante : Montre un aperçu de la prochaine diapositive.
  • Notes du Présentateur : Affiche les notes que vous avez ajoutées pour vous guider pendant la présentation.
  • Minuteur : Indique le temps écoulé depuis le début de la présentation.
  • Minuteur de Session : Permet de suivre le temps passé sur chaque diapositive.
  • Contrôles de Navigation : Boutons pour passer à la diapositive suivante, revenir à la précédente, etc.

Personnalisation du Mode Présentateur​

Vous pouvez personnaliser l'apparence et les fonctionnalités du mode présentateur en utilisant des options de configuration dans le fichier slidev.config.js.

Exemple de Configuration​

// slidev.config.js
export default {
  presenter: {
    enabled: true,
    shortcuts: true,
    notes: true,
    timer: true,
  },
}

Utilisation du Minuteur​

Le minuteur est un outil précieux pour gérer votre temps efficacement. Vous pouvez le démarrer, le mettre en pause et le réinitialiser directement depuis la vue du présentateur. Cela vous aide à respecter les délais et à garder un rythme constant tout au long de votre présentation.

Contrôles de Navigation​

Les contrôles de navigation dans le mode présentateur vous permettent de :

  • Passer à la diapositive suivante
  • Revenir à la diapositive précédente
  • Aller à une diapositive spécifique
  • Activer ou désactiver les notes et les minuteurs

Intégration avec des Applications de Présentation​

Le mode présentateur de Slidev peut être utilisé avec des outils de présentation en ligne comme Zoom, Google Meet, ou Microsoft Teams. Partagez simplement l'écran de la fenêtre de présentation avec votre audience tout en gardant la vue du présentateur sur votre écran principal.

Conclusion​

Slidev est bien plus qu'un simple outil de création de présentations. Grâce à sa richesse de fonctionnalités et à ses nombreuses possibilités d'intégration, il s'agit d'une plateforme complète et puissante pour créer des présentations interactives et dynamiques.

Slidev se positionne comme un outil complet pour la création de présentations modernes, que ce soit pour des conférences, des cours en ligne, des démonstrations de produits, ou des réunions d'affaires. Sa flexibilité, combinée à une interface utilisateur intuitive et à une extensibilité via des thèmes et des plugins, en fait un choix de premier ordre pour quiconque souhaite créer des présentations percutantes.

En adoptant Slidev, vous bénéficiez d'un écosystème riche en fonctionnalités et en intégrations, capable de répondre à une multitude de besoins et de scénarios. Que vous soyez un développeur, un éducateur, un professionnel du marketing, ou simplement quelqu'un qui veut créer des présentations attrayantes, Slidev offre tous les outils nécessaires pour réussir.

Plus d'infos​

Pour aller plus loin avec Slidev et approfondir vos connaissances, de nombreuses ressources sont disponibles en ligne. Que vous soyez à la recherche de documentation officielle, d'exemples pratiques, de thèmes, de plugins ou de tutoriels, voici une liste de ressources utiles pour maximiser votre expérience avec Slidev.

La documentation officielle de Slidev est le point de départ idéal pour toute information concernant l'utilisation et la personnalisation de Slidev. Elle couvre tous les aspects de l'outil, de l'installation à la création de thèmes personnalisés.

Le dépôt GitHub de Slidev contient le code source de l'outil ainsi que des informations sur la contribution, les mises à jour, et les discussions entre développeurs.

Pour personnaliser vos présentations Slidev, explorez les thèmes et plugins disponibles. Ces extensions permettent d'ajouter de nouvelles fonctionnalités et de modifier l'apparence de vos diapositives.

Consultez des exemples de présentations créées avec Slidev pour vous inspirer et voir comment d'autres utilisent cet outil pour leurs besoins spécifiques.