Démonstration de boîtes colorées

📦 2. SÉRIE DE BOÎTES DE DIALOGUE (TITRES CENTRÉS & BORDURE FINE)

Boîte Info

Boîte Succès

Boîte Avertissement

Boîte Erreur

🧪 3. TEST D'IMBRICATION (INLINE DANS LES BOÎTES)

Test en une seule ligne continue :

<div class="info | Rapport Flash Multi-styles | L'analyse montre une anomalie critique sur le serveur 3, mais le serveur 1 reste stable tandis que le cache est optimisé. )))">

Information | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aujourd’hui, dans ce système, nous pouvons écrire un texte parfaitement fluide tout en intégrant des éléments dynamiques comme ((gras | du texte important ou encore des informations mises en avant avec un surlignage visuel qui attire immédiatement l’attention du lecteur sans casser la continuité du discours.

Dans un contexte plus technique, il est possible de signaler un état critique avec une alerte système sérieuse ou au contraire de confirmer un fonctionnement normal avec une indication mais rassurante comme tout fonctionne correctement.

On peut également enrichir le contenu avec des éléments typographiques comme une phrase agrandie pour structurer visuellement l’information, ou encore ajouter des nuances avec un effet visuel discret mais efficace qui permet de hiérarchiser l’importance sans surcharger la page.

Dans une logique de données structurées, il devient aussi possible d’intégrer des paires clé-valeur directement dans le texte, par exemple Nom : Michel, Ville : Estagel, Statut : actif, ce qui transforme un simple paragraphe en mini-fiche dynamique lisible instantanément.

Enfin, ce système permet même d’insérer des blocs hybrides comme

titre

(( red no-icon | test rouge

test bleu

test bordure gras

alerte

titre

texte précédent test bordure texte suivant.

texte précédent test bordure texte suivant.

Alertes et notifications

Attention, cette action est irréversible !

Pour plus d'informations, consultez la documentation.

Votre fichier a été enregistré avec succès.

Erreur : connexion impossible au serveur.

Mise en valeur de texte

La commande git commit -m "message" permet de valider vos modifications.

Le prix est de 29,90 € pour la version complète.

Ce paramètre est obligatoire et ne peut pas être omis.

Blocs centrés

Titre mis en avant

Note : les résultats peuvent varier selon la configuration.

Fonctionnalité disponible uniquement en version Pro

Combinaisons avancées

⚡ Nouveauté de la version 2.0

Conseil : sauvegardez votre travail régulièrement.

Contenu réservé aux membres connectés.

🔥 MAINTENANCE PRÉVUE LE 20 MAI

texte avec gras et italique

MAINTENANCE PRÉVUE LE 20 MAI

Fichier enregistré avec succès.

Pensez à sauvegarder régulièrement. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit..

Cette action est irréversible.

--

C'est une contrainte normale du Markdown : une ligne vide crée un nouveau paragraphe.

texte normal et texte en gras et suite

Guide de mise en forme du texte

Ce guide explique comment mettre en valeur certains passages de texte directement dans vos pages, sans connaissance en informatique.

La syntaxe de base

Pour mettre en forme un texte, écrivez entre accolades : le style souhaité, une barre verticale, puis le texte à afficher.

La barre verticale | se fait avec la touche Alt Gr + 6 sur un clavier français.

Tapez ceci : \Ce texte est en rouge

Résultat : Ce texte est en rouge

Les couleurs de texte

Tapez ceci : \Ce texte est en rouge

Résultat : Ce texte est en rouge

Tapez ceci : \Ce texte est en bleu

Résultat : Ce texte est en bleu

Tapez ceci : \Ce texte est en vert

Résultat : Ce texte est en vert

Tapez ceci : \Ce texte est en orange

Résultat : Ce texte est en orange

Tapez ceci : \Ce texte est en gris

Résultat : Ce texte est en gris

Les couleurs de fond

Tapez ceci : \Fond jaune

Résultat : Fond jaune

Tapez ceci : \Fond vert

Résultat : Fond vert

Tapez ceci : \Fond bleu

Résultat : Fond bleu

Tapez ceci : \Fond rouge

Résultat : Fond rouge

Tapez ceci : \Fond gris

Résultat : Fond gris

Combiner plusieurs styles

On peut combiner autant de styles que l'on veut en les séparant par des espaces.

Tapez ceci : \Texte rouge et gras

Résultat : Texte rouge et gras

Tapez ceci : \Texte sur fond jaune avec bordure arrondie

Résultat : Texte sur fond jaune avec bordure arrondie

Tapez ceci : \Texte bleu en italique et petit

Résultat : Texte bleu en italique et petit

Les bordures

Tapez ceci : \Texte encadré

Résultat : Texte encadré

Tapez ceci : \Encadré aux coins arrondis

Résultat : Encadré aux coins arrondis

Tapez ceci : \Encadré rouge

Résultat : Encadré rouge

Tapez ceci : \Encadré bleu

Résultat : Encadré bleu

La taille du texte

Tapez ceci : \Texte plus grand

Résultat : Texte plus grand

Tapez ceci : \Texte plus petit

Résultat : Texte plus petit

L'alignement

Tapez ceci : \Texte centré

Résultat : Texte centré

Tapez ceci : \Texte aligné à droite

Résultat : Texte aligné à droite

Les boîtes d'alerte

Ce sont des raccourcis prêts à l'emploi, les plus simples à utiliser. Il suffit d'écrire le nom de la boîte suivi du texte.

Tapez ceci : \Ceci est une information importante.

Résultat : Ceci est une information importante.

Tapez ceci : \Le fichier a bien été enregistré.

Résultat : Le fichier a bien été enregistré.

Tapez ceci : \Vérifiez bien vos informations avant de continuer.

Résultat : Vérifiez bien vos informations avant de continuer.

Tapez ceci : \Attention, cette action est irréversible !

Résultat : Attention, cette action est irréversible !

Mettre du texte en gras ou en italique à l'intérieur

À l'intérieur des parenthèses, vous pouvez utiliser la mise en forme habituelle : entourez le mot avec ** pour le gras, et * pour l'italique.

Tapez ceci : \Pensez à sauvegarder votre travail régulièrement.

Résultat : Pensez à sauvegarder votre travail régulièrement.

Tapez ceci : \Cette opération est définitive et ne peut pas être annulée.

Résultat : Cette opération est définitive et ne peut pas être annulée.

Du texte mis en valeur dans une phrase

La mise en forme peut s'utiliser au milieu d'une phrase normale.

Tapez ceci : Le tarif est de \29,90 € pour la version complète.

Résultat : Le tarif est de 29,90 € pour la version complète.

Tapez ceci : Ce champ est \obligatoire.

Résultat : Ce champ est obligatoire.

Récapitulatif des styles disponibles

Couleurs de texte red, blue, green, orange, gray, white, purple

Couleurs de fond bg-red, bg-blue, bg-green, bg-yellow, bg-gray

Bordures border, border-red, border-blue, border-green, rounded

Typographie bold, italic, upper, mono, big, small

Alignement center, right, left

Boîtes d'alerte info, succes, warning, alerte

Icônes icon-info, icon-ok, icon-warning, icon-error, icon-bell, icon-star, icon-lock, icon-question

Conseils pratiques

• Les espaces autour de la barre | sont facultatifs
• On peut mettre autant de styles que l'on veut en les séparant par des espaces
• En cas de doute, utilisez les boîtes d'alerte : elles sont les plus simples à retenir
• Pour afficher une instruction sans qu'elle soit interprétée, ajoutez un \ devant la parenthèse

Résultat : Le tarif est de 29,90 € pour la version complète.

Résultat : Le tarif est de 29,90 € pour la version complète.

Résultat : Le tarif est de 29,90 € pour la version complète.

Le prix est de 29,90 € pour la version complète.

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

Démonstration des Boîtes

Variante multi-classes :

Bloc de test de mise en forme Markdown

Zone de Test Markdown

Exemples d’utilisation de la boîte universelle

<div class="no-icon grad2 big2 | Grand titre |"">

<div class="no-icon center grad2 big3 | l'aventure c'est l'Avent |"">

<div class="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