Aller au contenu
DevSecOps Logo DevSecOps Logo DevSecOps
Docs
Blog
Blog

Slidev

Mise à jour :

logo 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 :

Terminal window
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 :

Terminal window
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 :

Terminal window
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
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” :

Terminal window
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 :

Terminal window
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 :

Terminal window
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 :

Terminal window
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 :

Terminal window
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 :

Terminal window
  ●■▲
  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

Mode presenter slidev

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.