mon texte

titre

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

{icon-warning red bold | Attention, cette action est irréversible !}

{icon-info blue | Pour plus d'informations, consultez la documentation.}

{icon-ok green | Votre fichier a été enregistré avec succès.}

{icon-error red bg-red rounded | Erreur : connexion impossible au serveur.}

Mise en valeur de texte

La commande {mono bg-gray | git commit -m "message"} permet de valider vos modifications.

Le prix est de {bold green | 29,90 €} pour la version complète.

Ce paramètre est {bold red | obligatoire} et ne peut pas être omis.

Blocs centrés

{center big bold | Titre mis en avant}

{center italic gray | Note : les résultats peuvent varier selon la configuration.}

{center icon-star orange bold | Fonctionnalité disponible uniquement en version Pro}

Combinaisons avancées

{bg-yellow border rounded bold | ⚡ Nouveauté de la version 2.0}

{border-blue bg-blue rounded | Conseil : sauvegardez votre travail régulièrement.}

{icon-lock gray italic small | Contenu réservé aux membres connectés.}

{bg-red border-red rounded bold green center big2 | 🔥 MAINTENANCE PRÉVUE LE 20 MAI }

{red | texte avec gras et italique}

{alerte center | MAINTENANCE PRÉVUE LE 20 MAI}

{succes | Fichier enregistré avec succès.}

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

{warning icon-warning | Cette action est irréversible.}

--

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

{warning | 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 : {red | Ce texte est en rouge}

Résultat : {red | Ce texte est en rouge}

Les couleurs de texte

Tapez ceci : {red | Ce texte est en rouge}

Résultat : {red | Ce texte est en rouge}

Tapez ceci : {blue | Ce texte est en bleu}

Résultat : {blue | Ce texte est en bleu}

Tapez ceci : {green | Ce texte est en vert}

Résultat : {green | Ce texte est en vert}

Tapez ceci : {orange | Ce texte est en orange}

Résultat : {orange | Ce texte est en orange}

Tapez ceci : {gray | Ce texte est en gris}

Résultat : {gray | Ce texte est en gris}

Les couleurs de fond

Tapez ceci : {bg-yellow | Fond jaune}

Résultat : {bg-yellow | Fond jaune}

Tapez ceci : {bg-green | Fond vert}

Résultat : {bg-green | Fond vert}

Tapez ceci : {bg-blue | Fond bleu}

Résultat : {bg-blue | Fond bleu}

Tapez ceci : {bg-red | Fond rouge}

Résultat : {bg-red | Fond rouge}

Tapez ceci : {bg-gray | Fond gris}

Résultat : {bg-gray | Fond gris}

Combiner plusieurs styles

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

Tapez ceci : {red bold | Texte rouge et gras}

Résultat : {red bold | Texte rouge et gras}

Tapez ceci : {bg-yellow border rounded | Texte sur fond jaune avec bordure arrondie}

Résultat : {bg-yellow border rounded | Texte sur fond jaune avec bordure arrondie}

Tapez ceci : {blue italic small | Texte bleu en italique et petit}

Résultat : {blue italic small | Texte bleu en italique et petit}

Les bordures

Tapez ceci : {border | Texte encadré}

Résultat : {border | Texte encadré}

Tapez ceci : {border rounded | Encadré aux coins arrondis}

Résultat : {border rounded | Encadré aux coins arrondis}

Tapez ceci : {border-red | Encadré rouge}

Résultat : {border-red | Encadré rouge}

Tapez ceci : {border-blue | Encadré bleu}

Résultat : {border-blue | Encadré bleu}

La taille du texte

Tapez ceci : {big | Texte plus grand}

Résultat : {big | Texte plus grand}

Tapez ceci : {small | Texte plus petit}

Résultat : {small | Texte plus petit}

L'alignement

Tapez ceci : {center | Texte centré}

Résultat : {center | Texte centré}

Tapez ceci : {right | Texte aligné à droite}

Résultat : {right | 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 : {info | Ceci est une information importante.}

Résultat : {info | Ceci est une information importante.}

Tapez ceci : {succes | Le fichier a bien été enregistré.}

Résultat : {succes | Le fichier a bien été enregistré.}

Tapez ceci : {warning | Vérifiez bien vos informations avant de continuer.}

Résultat : {warning | Vérifiez bien vos informations avant de continuer.}

Tapez ceci : {alerte | Attention, cette action est irréversible !}

Résultat : {alerte | Attention, cette action est irréversible !}

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

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

Tapez ceci : {info | Pensez à sauvegarder votre travail régulièrement.}

Résultat : {info | Pensez à sauvegarder votre travail régulièrement.}

Tapez ceci : {warning | Cette opération est définitive et ne peut pas être annulée.}

Résultat : {warning | 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 {bold green | 29,90 €} pour la version complète.

Résultat : Le tarif est de {bold green | 29,90 €} pour la version complète.

Tapez ceci : Ce champ est {bold red | obligatoire}.

Résultat : Ce champ est {bold red | 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 l'accolade

Résultat : Le tarif est de {bold green | 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 {bold green | 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

• 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>.

Zone de Test Markdown

Exemples d’utilisation de la boîte universelle

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