• A la une
  • Catégories
  • Dossiers
  • +

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

par Jose Santiagole 02/08/2018

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

https://camo.githubusercontent.com/c12c8d143a3509f9aa6fde5629ea0c7f78e68437/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6a786e626c6b2f6d64782d6465636b2e676966

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 :

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir