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 :

Boîtes d'alerte avec grand espace visuel

L'espace entre l'icône et le bloc de texte a été fortement augmenté pour aérer la mise en page.

[INFO]
Voici la boîte d'information. Grâce au grand espace créé à gauche, le texte respire et se détache complètement de l'icône informative pour un confort de lecture optimal.

[ALERT]
Voici la boîte d'attention. L'icône reste bien sagement centrée sur la hauteur à gauche, séparée par une large zone blanche du reste des explications de vigilance.

[DANGER]
Voici la boîte de danger. Le rendu est ultra-propre et le texte commence pile au même alignement vertical sur toutes les boîtes.

[INFO] Voici la boîte d'information. Grâce au grand espace créé à gauche, le texte respire et se détache complètement de l'icône informative pour un confort de lecture optimal.

[ALERT] Voici la boîte d'attention. L'icône reste bien sagement centrée sur la hauteur à gauche, séparée par une large zone blanche du reste des explications de vigilance.

[DANGER] Voici la boîte de danger. Le rendu est ultra-propre et le texte commence pile au même alignement vertical sur toutes les boîtes.

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.