📖 Guide d'utilisation
Bienvenue dans le Studio Markdown DSFR ! Ce guide complet vous explique comment utiliser toutes les fonctionnalités de l'éditeur pour créer des documents professionnels conformes au Système de Design de l'État.
Navigation rapide
🖥️ Interface de l'éditeur
L'éditeur est divisé en 3 zones principales :
📝 Éditeur
Zone de gauche où vous écrivez votre contenu en Markdown. Sauvegarde automatique toutes les 800ms.
👁️ Preview
Zone de droite qui affiche le rendu en temps réel avec les styles DSFR appliqués.
🧰 Toolbar
Barre d'outils en haut avec les boutons Markdown et les onglets de composants DSFR.
✏️ Barre Markdown
La barre grise en haut contient les boutons de formatage Markdown de base :
| Bouton | Fonction | Syntaxe | Raccourci |
|---|---|---|---|
| B | Gras | **texte** |
Ctrl+B |
| I | Italique | *texte* |
Ctrl+I |
| Barré | ~~texte~~ |
— | |
</> |
Code inline | `code` |
— |
| H1/H2/H3/H4 | Titres | # Titre |
— |
| Liste • | Liste à puces | - item |
— |
| Liste 1. | Liste numérotée | 1. item |
— |
| 🔗 | Lien | [texte](url) |
Ctrl+K |
| 🖼️ | Image |  |
— |
| ▶️ | Vidéo | /// media |
— |
| " | Citation | > texte |
— |
| — | Séparateur | --- |
— |
Bouton Plein écran
À droite de la barre Markdown, le bouton "⛶ Plein écran" cache le header et footer pour plus d'espace. Appuyez sur ESC ou "Quitter le plein écran" pour revenir.
🗂️ Les onglets de composants
La barre bleue contient 10 onglets avec des composants DSFR prêts à l'emploi :
4 types d'alertes : Info (bleu), Succès (vert), Attention (orange), Erreur (rouge)
Usage : Messages importants, notifications, avertissements
Syntaxe :
/// alert | Titre
type: info
markup: h4
Contenu de l'alerte.
///6 types : Simple, Info (bleu), À noter (vert), Conseil (jaune), Avec icône, Avec lien
Usage : Mise en avant, points clés, informations importantes
Couleurs : blue-cumulus, green-menthe, yellow-tournesol, pink-tuile, purple-glycine
9 types : Défaut, Succès, Erreur, Info, Attention, Nouveau, Vert, Bleu, Violet
Usage : Étiquettes de statut, catégories, tags
Syntaxe :
/// badge
type: success
Texte du badge
///4 types : Simple, + Image, + Badge, 3 cartes (grille)
Usage : Services, produits, articles, galeries
Options : target (lien), image (URL), badge (texte|couleur), markup (h3/h4/h5)
6 boutons : 2/3/4/5 colonnes, Stats, Contacts
Usage : Données tabulaires, statistiques, listes structurées
Syntaxe Markdown standard :
| Colonne 1 | Colonne 2 |
|----------|----------|
| Donnée 1 | Donnée 2 |Rendu : Style DSFR avec en-têtes gris, lignes alternées, hover
3 types : Simple, + Badge, 4 tuiles (grille)
Usage : Navigation, services, catégories
Options : picto (icône DSFR), target (lien), badge
3 types : Fermé, Ouvert (par défaut), FAQ complète (3 accordéons)
Usage : FAQ, contenu repliable, sections longues
Option : open: true pour ouvrir par défaut
5 types : 2/3/4 colonnes égales, 8/4, 9/3
Usage : Mise en page, colonnes, layouts responsive
Système : Grille 12 colonnes DSFR (12 lg-4 = 1/3 sur desktop, pleine largeur sur mobile)
2 exemples complets : Page d'accueil, Page produits
Usage : Inspiration, démarrage rapide, templates complexes
3 templates : Site Web, Email, Slides
Usage : Démarrer rapidement avec une structure complète
Effet : Remplace tout le contenu de l'éditeur
📤 Export et partage
La barre d'actions en bas vous permet d'exporter votre travail :
📋 Copier
Copier HTML : Copie le code HTML généré (toutes les slides en mode présentation)
Copier Markdown : Copie le source brut
💾 Télécharger
Télécharger HTML : Fichier HTML autonome avec DSFR inclus (toutes les slides)
Télécharger Markdown : Fichier .md source
Génère un vrai PDF avec le rendu graphique complet (couleurs, composants DSFR, images). Toutes les slides en mode présentation. Qualité haute résolution.
🗑️ Effacer
Efface tout le contenu de l'éditeur et supprime la sauvegarde automatique. Confirmation demandée.
📊 Mode Slides (Présentation)
Activer le mode slides
Séparez vos sections avec --- (3 tirets) seul sur une ligne. Dès que vous avez au moins 2 sections, le mode slides s'active automatiquement.
Fonctionnalités en mode slides
- 📊 Barre de progression en haut (pourcentage visuel)
- ⛶ Bouton "Plein écran" dédié dans la slide (en haut à droite)
- ⬅️ ➡️ Navigation avec boutons "Précédent" / "Suivant"
- ⌨️ Flèches clavier ← → pour naviguer
- 🎬 Animation fluide à chaque changement
- 📱 Tailles de police adaptatives (responsive)
- 🖱️ Scroll avec molette si contenu long
- 💾 Export PDF/HTML génère toutes les slides
Plein écran slides
En mode plein écran, la barre de progression et le bouton "Quitter" restent visibles en haut (sticky), les contrôles de navigation en bas. Appuyez sur ESC pour quitter.
💡 Astuces et raccourcis
⌨️ Raccourcis clavier
- Ctrl+B → Gras
- Ctrl+I → Italique
- Ctrl+K → Lien
- Tab → Indenter (4 espaces)
- Échap → Quitter plein écran
- ← → → Naviguer slides
💾 Sauvegarde automatique
- ✅ Sauvegarde dans le navigateur toutes les 800ms
- 🔄 Restauration automatique au rechargement
- 📱 Fonctionne aussi sur mobile
- ⚠️ Effacée si vous cliquez "Effacer"
🎨 Thème sombre
Cliquez sur le bouton "Thème" dans le header pour basculer entre mode clair et sombre. Le choix est sauvegardé.
📐 Responsive
L'éditeur s'adapte aux mobiles et tablettes. Les grilles DSFR passent en colonne unique sur petit écran.
Prêt à créer ?
Retournez sur la page d'accueil pour commencer à écrire votre document !