Galerie de Démonstration des Boîtes Colorées

1. Boîtes d'Information et d'Organisation

{info} Information : Le script JavaScript traite automatiquement ces blocs dès le chargement de la page pour extraire les classes.

{note} Note : Cette syntaxe permet de garder vos fichiers Markdown parfaitement lisibles et faciles à maintenir au quotidien.

{tip} Astuce : Pour vos tests rapides, vous pouvez lier une feuille de style CSS directement dans votre page HTML de démonstration.

2. Boîtes d'Alerte et de Validation

{success} Succès : La classe a été injectée avec succès et le contenu entre accolades a été supprimé du texte final.

{warning} Attention : Veillez à bien respecter l'espace après la fermeture de l'accolade pour ne pas perturber la capture du texte.

{danger} Danger : Ne supprimez pas le script JavaScript tant que la logique de conversion n'a pas été basculée du côté de PHP.

3. Boîtes de Contenu et de Code

{example} Exemple : Vous pouvez combiner plusieurs classes comme {example large} si votre CSS gère des variations de taille.

{code} Code Source : Les expressions régulières utilisées ciblent uniquement les accolades situées au tout début du bloc de citation.

{quote} Citation : "La simplicité est la sophistication suprême." — Cette méthode évite l'usage de balises HTML complexes.

4. Boîtes Spéciales et Avancées

{bug} Correction : Si une boîte ne se colore pas, vérifiez que la classe correspond exactement à celle définie dans votre fichier CSS.

{todo} À faire : Préparer la migration de cette logique vers le framework PHP une fois que la phase de prototypage sera validée.

{help} Aide : En cas de besoin, les pseudo-éléments CSS ::before permettent d'injecter des icônes ou des emojis spécifiques à chaque classe.

{help todo} Aide : aide + todoEn cas de besoin, les pseudo-éléments CSS ::before permettent d'injecter des icônes ou des emojis spécifiques à chaque classe.