Skip to content

📖 Ajouter des Blocs et des Onglets dans MkDocs

Ce tutoriel explique comment :

  1. Activer les admonitions (blocs d'information stylisés)
  2. Ajouter des onglets (tabs) pour organiser le contenu
  3. Configurer MkDocs pour ces fonctionnalités

🛠 1. Activer les Extensions dans mkdocs.yml

Ajoute ces lignes dans ton fichier mkdocs.yml :

markdown_extensions:
  - admonition          # Blocs d'information stylisés
  - pymdownx.details    # Blocs repliables (dépliables au clic)
  - pymdownx.superfences # Améliore le rendu des admonitions et du code
  - pymdownx.tabbed     # Active les onglets (tabs)
  - pymdownx.highlight  # Améliore les couleurs des blocs de code

Ensuite, redémarre ton serveur MkDocs :

mkdocs serve

🎨 2. Ajouter un Bloc d’Information (Admonition)

Les admonitions permettent de créer des encadrés colorés avec une icône.

📌 Exemple :

!!! info "Information"
    Ceci est un encadré **informatif**.

!!! warning "Attention"
    ⚠️ Ce bloc affiche un avertissement !

!!! tip "Astuce"
    💡 Voici une astuce utile.

👀 Effet visuel : Un encadré coloré avec un titre et une icône.

🗂 3. Ajouter des Onglets (Tabs)

Les tabs permettent d’afficher plusieurs contenus sous un même bloc.

📌 Exemple :

=== "Android"
    Voici les instructions pour **Android**.

=== "Linux"
    Voici les instructions pour **Linux**.

=== "Mac"
    Voici les instructions pour **Mac**.

=== "Windows"
    Voici les instructions pour **Windows**.

👀 Effet visuel : Une barre avec plusieurs onglets pour chaque système.

💻 4. Ajouter du Code dans les Onglets

Tu peux mettre du code dans les onglets pour expliquer des commandes spécifiques.

📌 Exemple :

=== "Linux"
    sudo apt update && sudo apt upgrade

=== "Windows"
    winget upgrade --all

👀 Effet visuel : Chaque onglet affiche les commandes adaptées au système.

🚀 Conclusion

  • ✅ Admonitions (!!! info, !!! warning, !!! tip) pour des blocs stylisés.
  • ✅ Onglets (tabs) (=== "Titre") pour organiser du contenu.
  • ✅ Activation des extensions (pymdownx.tabbed, admonition, superfences).

🔹 Copie ce fichier dans ton MkDocs et profite de blocs interactifs ! 😊