Démonstration complète des fonctionnalités de Markdown

Ce document présente une démonstration de ce qu'il est possible d'écrire et de rendre avec le parseur marked.

1. Mise en forme du texte

Vous pouvez mettre le texte en gras, en italique, le barrer, ou utiliser du code en ligne.

Il est également possible de combiner les styles : texte en gras et italique.

2. Listes et hiérarchie

• Élément de liste à puces principal
  • Sous-élément avec une puce imbriquée
  • Un autre sous-élément
• Second élément principal
  1. Liste numérotée imbriquée
  2. Deuxième étape de la liste numérotée

3. Citations et blocs d'alerte

Les citations simples s'écrivent avec un chevron :

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

Note sur les blocs d'alerte : Le format Markdown standard ne propose pas de balise native pour les blocs d'alerte (type [!NOTE] ou [!WARNING]), mais ils sont généralement pris en charge via des extensions, des plugins (comme marked-alert) ou du HTML brut :

Ceci est un bloc d'information utile pour l'utilisateur.

Attention, cette action peut comporter des risques si elle n'est pas maîtrisée.

ℹ️ Note : Ceci est un bloc hhhd'information utile pour l'utilisateur. Ceci est un bloc d'information utile pour l'utilisateur. Ceci est un bloc d'information utile pour l'utilisateur. Ceci est un bloc d'information utile pour l'utilisateur.

💡Conseil : Voici une astuce pratique pour améliorer votre code.

❗Important : Cette information nécessite toute votre attention.

⚠️ Attention : Cette action peut comporter des risques si elle n'est pas maîtrisée.

🛑 Avertissement : Danger critique, manipulation à haut risque.

--

Galerie de Démonstration des Boîtes Colorées

1. Boîtes d'Information et d'Organisation

{info} Information : Le script JavaScript traite automatiquement ces blocs dès le chargement de la page pour extraire les classes.

{note_} Note : Cette syntaxe permet de garder vos fichiers Markdown parfaitement lisibles et faciles à maintenir au quotidien.

{tip} Astuce : Pour vos tests rapides, vous pouvez lier une feuille de style CSS directement dans votre page HTML de démonstration.

2. Boîtes d'Alerte et de Validation

{success} Succès : La classe a été injectée avec succès et le contenu entre accolades a été supprimé du texte final.

{warning} Attention : Veillez à bien respecter l'espace après la fermeture de l'accolade pour ne pas perturber la capture du texte.

{danger} Danger : Ne supprimez pas le script JavaScript tant que la logique de conversion n'a pas été basculée du côté de PHP.

3. Boîtes de Contenu et de Code

{example} Exemple : Vous pouvez combiner plusieurs classes comme {example large} si votre CSS gère des variations de taille.

{code} Code Source : Les expressions régulières utilisées ciblent uniquement les accolades situées au tout début du bloc de citation.

{quote} Citation : "La simplicité est la sophistication suprême." — Cette méthode évite l'usage de balises HTML complexes.

4. Boîtes Spéciales et Avancées

{bug} Correction : Si une boîte ne se colore pas, vérifiez que la classe correspond exactement à celle définie dans votre fichier CSS.

{todo} À faire : Préparer la migration de cette logique vers le framework PHP une fois que la phase de prototypage sera validée.

{help} Aide : En cas de besoin, les pseudo-éléments CSS ::before permettent d'injecter des icônes ou des emojis spécifiques à chaque classe.

{help todo} Aide : aide + todoEn cas de besoin, les pseudo-éléments CSS ::before permettent d'injecter des icônes ou des emojis spécifiques à chaque classe.

4. Tableaux

Bien que la demande initiale mentionne les tableaux, le Markdown standard ne prend pas en charge l'intégration directe d'images au sein des cellules de tableaux sans l'aide de balises HTML. Voici un exemple de tableau classique, puis un tableau enrichi avec du HTML pour intégrer des images.

Tableau classique

Tableau avec images (via HTML)

Miniature	Description	Action
	Icône représentant le module A	Télécharger
	Icône représentant le module B	Télécharger

5. Images et Liens

Voici comment intégrer une image standard et un lien hypertexte :

• Visitez le site officiel : Site de markedjs
• Exemple d'image avec légende alternative :

6. Blocs de code et syntaxe

// Exemple de code pris en charge par marked avec coloration syntaxique
function saluer(nom) {
  console.log(`Bonjour, ${nom} ! Bienvenue dans marked.`);
}

saluer("Utilisateur");

Grille d’images responsive – Domaine public

Marked - Markdown Parser

Marked lets you convert Markdown into HTML. Markdown is a simple text format whose goal is to be very easy to read and write, even when not converted to HTML. This demo page will let you type anything you like and see how it gets converted. Live. No more waiting around.

How To Use The Demo

1. Type in stuff on the left.
2. See the live updates on the right.

That's it. Pretty simple. There's also a drop-down option above to switch between various views:

• Preview: A live display of the generated HTML as it would render in a browser.
• HTML Source: The generated HTML before your browser makes it pretty.
• Lexer Data: What marked uses internally, in case you like gory stuff like this.
• Quick Reference: A brief run-down of how to format things using markdown.

Why Markdown?

It's easy. It's not overly bloated, unlike HTML. Also, as the creator of markdown says,

The overriding design goal for Markdown's formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

Ready to start writing? Either start changing stuff on the left or clear everything with a simple click.

ℹ️ Note : Ceci est un bloc hhhd'information utile pour l'utilisateur. Ceci est un bloc d'information utile pour l'utilisateur. Ceci est un bloc d'information utile pour l'utilisateur. Ceci est un bloc d'information utile pour l'utilisateur.

Voici un exemple complet de document Markdown illustrant différentes combinaisons de classes avec la nouvelle syntaxe [texte]{.classe} :

Exemple de document avec styles en ligne

Voici un paragraphe standard contenant [un mot très important]{.rouge .gras} ainsi qu'un passage [surligné en jaune]{.surligne .jaune}.

Présentation de fonctionnalités

• Statut du projet : [En cours de validation]{.badge .badge-warning .texte-court}
• Priorité : [Haute importance]{.badge .badge-danger .majuscules}
• Libellé complémentaire : [Information vérifiée]{.badge .badge-success .italique}

Citation et mise en valeur

Dans le cours du texte, nous pouvons appliquer des effets combinés :

Un message d'avertissement peut contenir [une alerte clignotante]{.texte-rouge .gras .clignotant} pour attirer l'attention immédiatement. À l'inverse, une note discrète sera écrite [en petits caractères gris]{.texte-petit .texte-gris .italique}.

Vous pouvez également simuler des éléments d'interface : appuyez sur [Valider le formulaire]{.bouton .bouton-primaire .ombre} pour continuer ou sur [Annuler]{.bouton .bouton-secondaire} pour abandonner.

Texte important ... Texte en gras rouge ... Texte surligné en jaune ... Texte vert en gras et italique ... Alerte importante ... Information discrète ...

}

✕