titre

test rouge test bleu test bordure gras alerte

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

Combinaisons avancées

⚡ Nouveauté de la version 2.0

Conseil : sauvegardez votre travail régulièrement.

Contenu réservé aux membres connectés.

texte avec gras et italique

--

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

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 : Ce texte est en rouge

Les couleurs de texte

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

Résultat : Ce texte est en rouge

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

Résultat : Ce texte est en bleu

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

Résultat : Ce texte est en vert

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

Résultat : Ce texte est en orange

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

Résultat : Ce texte est en gris

Les couleurs de fond

Tapez ceci : {bg-yellow | Fond jaune}

Résultat : Fond jaune

Tapez ceci : {bg-green | Fond vert}

Résultat : Fond vert

Tapez ceci : {bg-blue | Fond bleu}

Résultat : Fond bleu

Tapez ceci : {bg-red | Fond rouge}

Résultat : Fond rouge

Tapez ceci : {bg-gray | 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 : {red bold | Texte rouge et gras}

Résultat : Texte rouge et gras

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

Résultat : Texte sur fond jaune avec bordure arrondie

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

Résultat : Texte bleu en italique et petit

Les bordures

Tapez ceci : {border | Texte encadré}

Résultat : Texte encadré

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

Résultat : Encadré aux coins arrondis

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

Résultat : Encadré rouge

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

Résultat : Encadré bleu

La taille du texte

Tapez ceci : {big | Texte plus grand}

Résultat : Texte plus grand

Tapez ceci : {small | Texte plus petit}

Résultat : Texte plus petit

L'alignement

Tapez ceci : {center | Texte centré}

Résultat :

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

Résultat :

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 :

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

Résultat :

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

Résultat :

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

Résultat :

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 :

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

Résultat :

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 29,90 € pour la version complète.

Tapez ceci : Ce champ est {bold red | 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 l'accolade

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

ℹ️ Information

Ceci est une boîte d’information classique.

📝 Note Importante

Pense à sauvegarder ton travail régulièrement.

💡 Astuce du jour

Crée des snippets dans QuickEdit+ pour aller plus vite.

✅ Succès

L’opération a été réalisée avec succès !

⚠️ Attention requise

Vérifie bien les paramètres avant de valider.

🔴 Action Dangereuse

Cette action est irréversible.

⭐ Information Principale

Boîte avec le style principal.

💡 Idée

Pourquoi ne pas essayer cette nouvelle approche ?

📖 Exemple Pratique

Voici comment fonctionne cette syntaxe.

💬 Citation Célèbre

"La simplicité est la sophistication suprême." — Léonard de Vinci.

🐛 Bug Corrigé

Le problème a été résolu dans cette version.

📋 Liste des Tâches

> - Terminer le design

• Tester sur mobile
• Ajouter de nouvelles boîtes

❓ Centre d’Aide

Tu peux me demander d’ajouter d’autres types.

❔ Question

Quelle est la meilleure méthode selon toi ?

🔄 Mise à Jour

Nouvelle version 2.4 est disponible.

🔒 Sécurité

Active toujours la double authentification.

📅 Rappel

Réunion prévue le 15 juin à 14h.

💰 Finance

Budget mensuel : 2450 €.

⏱️ Temps Estimé

Durée estimée : 45 minutes.

Variante multi-classes :

🔴 Alerte Critique

Cette opération combine plusieurs classes.

⚠️ Attention

Exemple avec plusieurs classes.

Bloc de test de mise en forme Markdown

ℹ️ 🧪 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>.

ℹ️ 🧪 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

ℹ️ 🧪 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>

✅ Succès

Cette boîte fonctionne très bien avec plusieurs formats en même temps.

⚠️ Attention

N’oublie pas de tester ce style barré et ce surlignage.

Exemples d’utilisation de la boîte universelle

🔴 Alerte Critique

Cette boîte est grande, avec une ombre renforcée et un style danger.

⚠️ Attention Importante

Boîte avec bordure plus épaisse.

✅ Succès Rapide

Cette boîte est en version petite et compacte.

⭐ Information Centrée

Le contenu de cette boîte est centré horizontalement.

💡 Idée Géniale

Combinaison de grande taille + ombre + idée.

Sans Icône

Cette boîte n’affiche pas d’icône dans le titre.

Sans Icône

Cette boîte n’affiche pas d’icône dans le titre.

Grand titre

l'aventure c'est l'Avent

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