Nous contacter

  1. Accueil
  2. Outils web pour les pros
  3. Outils productivité
  4. Logiciels de présentation
  5. Créez des présentations classes et dynamiques avec MDX-deck

Créez des présentations classes et dynamiques avec MDX-deck

Aujourd'hui le BlogDuWebesign vous propose de découvrir une ressource très intéressante pour des supports pour présentations : MDX-deck.

Créez des présentations classes et dynamiques avec MDX-deck

MDX-deck est donc un outil permettant de créer des présentations sous la forme d'une pile de slides. 

Très simple à utiliser il reste extrêmement puissant grâce à son utilisation de markdown, jsx et react à travers des fichiers MDX.

Qu'est-ce que le MDX ?

En quelques mots le MDX est une variante de markdown permettant d'accéder à la puissance des composants personnalisés et du jsx.

 

Sa syntaxe est des plus simples : si vous avez besoin d'un composant jsx, insérez simplement votre ligne d'import ou vous voulez dans votre fichier MDX, et vous pourrez ensuite utiliser votre composants sous sa forme d'element HTML ou vous voulez !

Pourquoi créer une présentation en mdx-text plutôt qu'avec power point ?

Les raisons sont nombreuses et découlent toutes du même point : les fichiers MDX ne sont au final que du texte. Il est donc extrêmement simple de travailler en collaboration et de versionaliser avec git. 

De plus, les fichiers texte sont éditable quel que soit la plateforme et le support. Besoin d'appliquer une dernière modification sur votre projet dans le train directement depuis votre téléphone ? C'est possible !

Enfin, les présentations obtenu sont en HTML/css/JS, ce qui est un plus non négligeable si votre présentation touche à des technos web, en permettant de montrer le résultat de vos exemple directement dans la page de manière dynamique.

Installation et mise en place

Pas de surprise pour l'installation, elle se fait à travers npm.

npm i -D mdx-deck

Une fois l'installation faites, je vous propose de prendre deux petites minutes pour lire la documentation et vous êtes prêt à commencer !

Si vous êtes plus tutos vidéos, je vous propose de découvrir le tuto suivant :