Démonstration complète des fonctionnalités du langage Markdown de Quickedit+
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
- Liste numérotée imbriquée
- 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 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.
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
| Module | Statut | Version |
|---|---|---|
| Analyseur | Stable | v18.0.14 |
| Compilateur | Actif | v2.1.0 |
| Rendu | En cours | v0.9.4 |
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
- Type in stuff on the left.
- 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.