Titre principal — H1

Ceci est un paragraphe standard avec du texte courant. La police Marcellus est utilisée pour les titres, tandis que le corps du texte utilise le sans-serif système pour une lisibilité optimale sur tous les écrans. La largeur de ligne est limitée à 72ch pour un confort de lecture idéal.

Voici un deuxième paragraphe pour illustrer l'espacement entre blocs de texte. On peut y insérer du texte en gras, de l'italique, du texte barré, du texte souligné, du texte surligné, ainsi que des exposants¹ et des indices₂.

Titre de section — H2

Le H2 est marqué par une bordure gauche bleue, caractéristique d'un style éditorial moderne. Il introduit une nouvelle section majeure du contenu.

Sous-section — H3

Le H3 apparaît en bleu accent pour créer une hiérarchie claire sans surcharger visuellement la page.

Groupe de contenu — H4

Niveau intermédiaire pour organiser le contenu à l'intérieur d'une sous-section.

Titre de carte — H5

Utilisé pour des éléments secondaires, en gris doux.

Label ou légende — H6

Le H6 s'affiche en majuscules espacées, idéal pour des étiquettes ou des métadonnées.

Listes

Liste non ordonnée

• Premier élément de liste
• Deuxième élément avec du texte en gras
• Troisième élément
  • Sous-élément niveau 2
  • Autre sous-élément
    • Sous-élément niveau 3
• Quatrième élément

Liste ordonnée

1. Première étape du processus
2. Deuxième étape avec une explication plus longue qui peut s'étendre sur plusieurs mots
3. Troisième étape
   1. Sous-étape alpha
   2. Sous-étape beta
4. Quatrième étape

Liste de définitions

Parsedown : Bibliothèque PHP rapide pour convertir le Markdown en HTML.

clamp() : Fonction CSS permettant de définir une valeur fluide avec un minimum et un maximum.

Marcellus : Police serif élégante de Google Fonts, idéale pour les titres éditoriaux.

Liens et texte enrichi

Voici un lien standard, un lien avec title{title="Lien avec infobulle"}, et une abréviation : CSS. On peut aussi utiliser Ctrl + C pour copier, et Ctrl + V pour coller.

Texte avec du petit texte intégré dans un paragraphe normal pour les annotations discrètes.

Citations

La typographie est l'art et la technique d'assembler des caractères mobiles pour reproduire un texte. Elle joue un rôle fondamental dans la lisibilité et l'esthétique d'un document.

Robert Bringhurst, The Elements of Typographic Style

Une citation plus courte, sans auteur, pour illustrer le rendu minimal du composant.

Code

Code inline

Utilisez la propriété font-size: clamp(1rem, .95rem + .25vw, 1.375rem) pour une typographie fluide. La balise <code> est stylisée avec une police monospace et un fond légèrement coloré.

Bloc de code

/* Système typographique fluide complet */
:root {
  --font-heading : 'Marcellus', Georgia, serif;
  --font-body    : system-ui, sans-serif;
  --font-mono    : 'JetBrains Mono', monospace;
}

h1 { font-size: clamp(1.75rem, 1.25rem + 2.5vw, 4rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.5vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, .95rem + 1.1vw, 2.25rem); }

p {
  font-size  : clamp(1rem, .95rem + .25vw, 1.375rem);
  line-height: clamp(1.55, 1.5 + .1vw, 1.8);
  max-width  : 72ch;
}

Tableaux

Callouts

Danger — Action irréversible. Ce callout rouge signale un risque important ou une erreur critique.

Info — À noter pour la suite de la configuration logicielle.

Succès — L'installation s'est déroulée correctement.

Images

Exemple de figure avec légende — image centrée avec border-radius et figcaption stylisé.

Ligne horizontale

La balise <hr> est rendue comme un dégradé bleu centré, sobre et élégant.

Elle sépare visuellement les sections sans être trop présente.

Shortcodes {classes | texte}

La fonction parse_md_custom permet d'insérer n'importe quel élément stylisé directement dans le MD, sans écrire de HTML.

Syntaxe

La syntaxe est {classes | contenu}. Le contenu est interprété en Markdown. Pour afficher les accolades littéralement, préfixez d'un \.

Aliases prédéfinis

Exemples — Aliases

{alerte | Fichier supprimé — cette action est irréversible !}

{succes | Enregistrement effectué avec succès.}

{info | Consultez la documentation pour plus de détails.}

{warning | Vérifiez vos données avant de continuer.}

Exemples — Classes libres

Bloc centré :

{block center | Ceci est un bloc libre avec classes personnalisées.}

Élément inline dans une phrase — voici {bold | du texte en gras} intégré dans un paragraphe normal.

Texte inline en italique : la propriété {italic | color} est définie dans les variables CSS.

Échappement

Pour afficher les accolades sans les interpréter, utilisez \{ :

{alerte | ce shortcode ne sera pas interprété, il s'affiche tel quel}

Texte long

{succes | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. }

{info shadow | informations} Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Danger : Alerte de sécurité — Le mot de passe par défaut doit être modifié immédiatement après l'installation.

Info : Note de mise à jour — Cette version logicielle requiert PHP 8.2 ou une version supérieure pour fonctionner.

Succès — L'importation de la base de données est terminée.

Notes de bas de page

Voici un exemple de footnote[^1] et une deuxième référence[^2].

[^1]: Première note de bas de page — exemple de footnote générée par Parsedown-Extra. [^2]: Deuxième note avec plus de contenu pour illustrer le rendu sur plusieurs lignes si nécessaire.