Markdown
wc-markdown
Composant de rendu Markdown avec support pour éléments avancés comme les admonitions, les onglets, et la mise en forme riche. Parfait pour afficher des énoncés d'exercices, des explications théoriques, des guides méthodologiques ou des ressources documentaires avec une mise en forme élégante et structurée.
Documentation
Le composant Markdown permet d'afficher du contenu formaté avec une syntaxe simple et lisible. Basé sur la bibliothèque nge-markdown, il offre des fonctionnalités étendues au-delà du Markdown standard, rendant vos contenus pédagogiques plus riches et structurés.
Propriétés principales
- data: Contenu Markdown à afficher directement dans le composant
- file: URL vers un fichier Markdown externe à charger et afficher
Si les deux propriétés sont définies,
dataest prioritaire surfile.
Fonctionnalités avancées
Admonitions (notes contextuelles)
Créez des encadrés colorés pour mettre en évidence différents types d'informations:
:::+ note Titre de la note
Contenu de la note avec informations importantes.
:::
:::+ warning Attention
Contenu d'avertissement à ne pas négliger.
:::
:::+ tip Astuce
Conseil utile pour les apprenants.
:::
:::+ danger Important
Information critique ou mise en garde.
:::Système d'onglets
Organisez votre contenu en onglets pour économiser de l'espace et structurer l'information:
=== Premier onglet
Contenu du premier onglet
=== Deuxième onglet
Contenu du deuxième onglet
=== Troisième onglet
Contenu du troisième onglet
===Tableaux avancés
Créez des tableaux avec fusion de cellules et mise en forme:
| En-tête 1 | En-tête 2 | En-tête 3 |
| :------------------------- | :--------: | --------: |
| Gauche | Centré | Droite |
| Cellule avec **formatage** | _Italique_ | `Code` |Applications pédagogiques
Le composant Markdown est particulièrement utile pour:
- Rédiger des énoncés d'exercices structurés
- Présenter des explications théoriques
- Fournir de la documentation
- Créer des guides étape par étape
- Organiser des ressources pédagogiques
Ressources complémentaires
Pour explorer toutes les possibilités offertes par ce composant:
Exemple interactif
API
data""file""