Infobulles et agrandissement d'image¶
Objectif : ajouter à la page des infobulles au survol et permettre d'agrandir les captures d'écran.
Ce que vous allez apprendre : les infobulles (fonctionnalité Material content.tooltips) et la lightbox d'image (plugin mkdocs-glightbox).
Au-delà du Markdown pur
Ces deux effets ne viennent pas de Markdown lui-même, mais du thème Material et d'un plugin.
Ils s'activent dans mkdocs.yml (voir le préambule).
Infobulles au survol¶
Avec la fonctionnalité content.tooltips activée, un attribut title (posé par attr_list) s'affiche dans une bulle stylée au survol.
Survolez ce [lien](#){ title="Forge est un framework web Python" }.
Survolez ce **mot**{ title="explication au survol" }.
Rendu (survolez) :
Survolez ce lien.
Survolez ce mot.
Les abréviations (palier précédent) produisent aussi une infobulle, sans attribut title :
Rendu (survolez le sigle) :
Le jeton CSRF protège les écritures.
Agrandir une image¶
Avec le plugin mkdocs-glightbox, toute image de contenu devient cliquable : un clic l'ouvre en grand dans une surimpression (lightbox), avec un fond sombre et un bouton de fermeture.
Rendu (cliquez sur l'image) :
Aucune syntaxe particulière n'est nécessaire : le comportement est automatique pour les images de la documentation.
Ajoutez à votre page¶
Dans prise-en-main.md, donnez une infobulle à un terme technique, et insérez une capture d'écran (elle s'agrandira au clic) :
Le serveur de **développement**{ title="à n'utiliser qu'en local, jamais en production" } écoute sur le port 8000.
À retenir¶
- Une infobulle vient d'un attribut
title(viaattr_list) ou d'une abréviation, rendue par la fonctionnalité Materialcontent.tooltips. - La lightbox (plugin
mkdocs-glightbox) agrandit toute image de contenu au clic, sans syntaxe particulière. - Ces effets dépendent de la configuration
mkdocs.yml, pas du Markdown seul.