🎨 Boîtes Colorées - no-icon corrigé

Démonstration des Boîtes

{info | Information} Ceci est une boîte d’information classique.

{note | Note Importante} Pense à sauvegarder ton travail régulièrement.

{tip | Astuce du jour} Crée des snippets dans QuickEdit+ pour aller plus vite.

{success | Succès} L’opération a été réalisée avec succès !

{warning | Attention requise} Vérifie bien les paramètres avant de valider.

{danger | Action Dangereuse} Cette action est irréversible.

{primary | Information Principale} Boîte avec le style principal.

{idea | Idée} Pourquoi ne pas essayer cette nouvelle approche ?

{example | Exemple Pratique} Voici comment fonctionne cette syntaxe.

{quote | Citation Célèbre} "La simplicité est la sophistication suprême." — Léonard de Vinci.

{bug | Bug Corrigé} Le problème a été résolu dans cette version.

{todo | Liste des Tâches}

• Terminer le design
• Tester sur mobile
• Ajouter de nouvelles boîtes

{help | Centre d’Aide} Tu peux me demander d’ajouter d’autres types.

{question | Question} Quelle est la meilleure méthode selon toi ?

{update | Mise à Jour} Nouvelle version 2.4 est disponible.

{security | Sécurité} Active toujours la double authentification.

{calendar | Rappel} Réunion prévue le 15 juin à 14h.

{money | Finance} Budget mensuel : 2450 €.

{time | Temps Estimé} Durée estimée : 45 minutes.

Variante multi-classes :

{danger large | Alerte Critique} Cette opération combine plusieurs classes.

{warning shadow | Attention} Exemple avec plusieurs classes.

Bloc de test de mise en forme Markdown

{info | 🧪 Zone de Test : Formats et Styles Markdown} Voici une démonstration des différents styles de texte applicables en Markdown au sein de notre boîte colorée :

• Gras : S'écrit avec deux astérisques comme **ceci**.
• Italique : S'écrit avec un seul astérisque comme *ceci*.
• Gras et Italique : S'écrit avec trois astérisques comme ***ceci***.
• Barré : S'écrit avec deux tildes comme ~~ceci~~.
• Souligné : Le Markdown natif ne le gère pas, on utilise la balise HTML <u>ceci</u>.
• Surligné : Selon le parseur, s'écrit avec des signes égal ==ceci== ou la balise HTML <mark>ceci</mark>.

{info | 🧪 Zone de Test : Formats et Styles Markdown} Voici une démonstration des différents styles de texte applicables en Markdown au sein de notre boîte colorée : Gras : S'écrit avec deux astérisques comme **ceci**. Italique : S'écrit avec un seul astérisque comme *ceci*. Gras et Italique : S'écrit avec trois astérisques comme ***ceci***.Barré : S'écrit avec deux tildes comme ~~ceci~~. Souligné : Via la balise HTML <u>ceci</u>. Surligné : Via la balise HTML <mark>ceci</mark>.

Zone de Test Markdown

{info | 🧪 Zone de Test : Formats Markdown} Voici une démonstration des différents styles :

• Gras : avec **texte**
• Italique : avec *texte*
• Gras + Italique : avec ***texte***
• Barré : avec ~~texte~~
• Souligné : avec la balise <u>texte</u>
• Surligné : avec ==texte== ou <mark>texte</mark>

{success | Succès} Cette boîte fonctionne très bien avec plusieurs formats en même temps.

{warning | Attention} N’oublie pas de tester ce style barré et ce surlignage.

Exemples d’utilisation de la boîte universelle

{danger large shadow | Alerte Critique} Cette boîte est grande, avec une ombre renforcée et un style danger.

{warning border-thick | Attention Importante} Boîte avec bordure plus épaisse.

{success small | Succès Rapide} Cette boîte est en version petite et compacte.

{primary center | Information Centrée} Le contenu de cette boîte est centré horizontalement.

{idea large shadow | Idée Géniale} Combinaison de grande taille + ombre + idée.

{ no-icon white grad1| Sans Icône} Cette boîte n’affiche pas d’icône dans le titre.

{ no-icon grad2| Sans Icône} Cette boîte n’affiche pas d’icône dans le titre.

{ no-icon grad2 big2}

Grand titre

{ no-icon center grad2 big3} l'aventure c'est l'Avent

{ no-icon border1 center grad4 height30vh} l'aventure c'est l'Avent

Reste beige, intacte et alignée à gauche. Le pic du Canigou ou pic du Canigó (catalan : Pica del Canigó) est le haut sommet le plus oriental des Pyrénées, culminant à 2 785 mètres d'altitude.

texte au-dessus de l'image Le pic du Canigou ou pic du Canigó (catalan : Pica del Canigó) est le haut sommet le plus oriental des Pyrénées, culminant à 2 785 mètres d'altitude.

Titre de niveau 1 (h1) : Démo complète Markdown

Voici un paragraphe d'introduction pour tester la typographie fluide du corps de texte. Ce document rassemble l'intégralité des fonctionnalités du langage Markdown interprétées par Parsedown, afin de valider le comportement de la feuille de style sur tous les types d'écrans.

Titre de niveau 2 (h2) : Formats de texte et typographie en ligne

On peut appliquer du style sur les mots directement au milieu d'une phrase :

• Du texte en gras avec l'élément strong.
• Du texte en italique avec l'élément em.
• Du texte combinant les deux styles.
• Du texte biffé pour marquer une suppression.

On peut également utiliser des balises HTML fines souvent générées ou intégrées :

• Une petite instruction textuelle.
• Du texte mis en évidence avec un surlignage.
• Une insertion de texte ou une modification récente.
• Des formules avec des exposants (X²) et des indices (H₂O).
• Une abréviation avec bulle d'aide : HTML.

Titre de niveau 3 (h3) : Listes et descriptions

Titre de niveau 4 (h4) : Liste à puces (non ordonnée)

• Premier élément de niveau principal.
• Deuxième élément de niveau principal.
  • Sous-élément imbriqué pour tester l'alignement.
  • Un autre sous-élément sans décalage excessif.
• Troisième élément.

Titre de niveau 5 (h5) : Liste numérotée (ordonnée)

1. Étape initiale obligatoire.
2. Étape intermédiaire de configuration.
3. Étape finale de validation du rendu.

Titre de niveau 6 (h6) : Liste de description HTML

Termux

Environnement d'émulation terminal pour Android permettant de lancer des scripts PHP localement.

Parsedown

Un parseur PHP ultra-rapide et conforme aux spécifications Markdown standard.

Titre de niveau 2 (h2) : Liens, citations et éléments interactifs

Voici un exemple de lien vers le site officiel de Google Fonts pour tester le soulignement discret et l'effet de transition au survol ou au focus.

Pour les raccourcis clavier, on utilise la balise dédiée : Appuyez sur Ctrl + Maj + R pour forcer le rafraîchissement du navigateur.

Note importante : Ceci est une citation blockquote. Elle permet de mettre en avant un paragraphe spécifique en conservant la lumière du thème et en appliquant une bordure épaisse sur le côté gauche, sans créer d'indentation globale gênante pour la lecture.

Voici un élément de contenu interactif pliable :

Titre de niveau 2 (h2) : Codes sources et tableaux

Voici un exemple de code en ligne inséré directement dans un paragraphe pour vérifier que les mots longs ne coupent pas la mise en page générale du site.

Bloc de code source (pre code)

<?php
// Script de test pour valider le retour à la ligne automatique
$markdown = "# Titre de test\nUn paragraphe de texte standard.";
$parsedown = new Parsedown();
echo $parsedown->text($markdown);

// Une ligne volontairement très longue pour tester la sécurité antidébordement horizontal de la feuille de style sur les petits écrans de smartphones
$tableau_donnees = array("Estagel", "Pyrénées-Orientales", "Occitanie", "France", "Europe", "Terre", "Système Solaire", "Voie Lactée");
?>

Structure d'un tableau de données

Le tableau suivant permet de vérifier l'application des bordures fines et l'alternance des couleurs de lignes (zebra striping).

Titre de niveau 2 (h2) : Médias et informations de contact

Image réactive

L'image ci-dessous s'adapte automatiquement à la largeur du conteneur sans jamais déborder, qu'elle soit affichée sur un écran de téléphone ou sur une télévision.

Bloc d'adresse (HTML address)

Pour finaliser la démo, voici la structure sémantique d'un bloc d'adresse :

Tableaux

Html source