---
title: Tutoriel CodiMD (drane PC_elea)
author: Drane ac-clermont
date: 2025
tags:
- CodiMD
- tutoriel
- drane PC_elea
- apps
---
# Tutoriel CodiMD *([ac-clermont](https://pedagogie.ac-clermont.fr/numerique-educatif/category/documentation-et-tutoriels/))*
<center>
</center>
:::spoiler ✴ **Contact académique :**
:::success
* Mail accompagnement Eléa sur l'académie : **accompagnement.elea@ac-clermont.fr**
:::
:::spoiler 🔍 **Documentation et tutoriels des services de “apps.education”**
:::info
* [**Documentation et tutoriels des services de “apps.education”**](https://codimd.apps.education.fr/s/swCBEVTHZ#)
:::
<center>
NEW 09/24💥/ **MAJ 02/25** 👁️
</center>
----
:::info
CodiMD est un **éditeur de texte collaboratif en temps réel**, basé sur du Markdown pour :
* Prise de notes collaboratives
* Rédaction et présentation de documentation ...
:::
###  🔵 [Se connecter à CodiMD](https://codimd.apps.education.fr) (avec son identifiant académique)
## 1️⃣ Créer et gérer ses notes 
:::spoiler *(détails)* **En-tête** de note YAML **non visible** pour une recherche efficace
:::info
* A copier en haut d'une nouvelle note.
* Permet de gérer et rechercher plus facilement les différentes notes dans son CodiMD.
* Pour une recherche efficace, définir des mot-clés dans *tags :*, définir un titre dans *title :*
````
---
title: Tutoriels rapide CodiMD (drane PC_elea)
author: Drane ac-clermont/drane.pc_elea
date: 2024
tags:
- CodiMD
- tutoriel
- drane PC_elea
---
````
:::
:::spoiler *(détails)* Protection et **droits de partage**
:::info
**Seul le créateur peut modifier les permissions :**
Sélectionner **Locked** pour rendre la note uniquement visible par le lien "Publier" 
:::
:::spoiler *(détails)* Lien de **diffusion** et modification du CodiMD
:::info
* lien **"Publier"** à diffuser pour consulter la page : 
* ++Dans la page publiée++, **"stylo" pour retourner dans CodiMD** et le modifier : 
(propriètaire ou droits spécifiques)
* **"Fenêtre" pour afficher et modifier** le code Markdown : 
:::
:::spoiler *(détails)* Format d'exportation (OpenOffice, Word, ...)
:::success
1. Dans "Menu"  sélectionner Pandoc (Beta) 
2. Sélectionner le format d'exportation
:::
:::spoiler *(détails)* Historique des modifications
:::success
:::
:::spoiler *(détails)* **Sauvegarder** ses notes markdown
:::info
Toutes les notes sont sauvegardées dans une archive .zip
Sur sa **[page d'accueil](https://codimd.apps.education.fr/)**, dans son profil, **"Exporter ses données utilisateur"**
 =>  =>
:::
## 2️⃣ Mise en page
### 🔵 **Retour à ligne** forcé (paragraphe), => **2 espaces** en fin de ligne puis Entrée
* ou pour forcer le passage à la ligne avec la balise HTML **\<br>** (espace avant, espace après la balise)
* **pour centrer**, balises **\<center>** texte/image... **\</center>** ... avec un espace après, avant les balises.
* Ligne de séparation ---- ou  de la barre d'outils
----
### 🔵 **Caractères**
:::spoiler *(détails)* **Caractères** (attribut : gras, italique, exposant ...)
:::info
* **gras** : entre deux doubles \**, ou \__(double tiret bas). => \*\*texte gras** 
* _italique_ : entre deux \*, ou \_ (tiret bas). => \_ texte italique_ 
* ~~barré~~ : entre deux doubles \~~. => \~~texte à barrer~~ 
* ++souligné++ entre deux doubles \++ => \++texte à souligner\++
* ^exposant^ entre deux \^. => \^texte à exposant^
* ~indice~ entre deux \~. => \~texte à indice~
* ==surligné== entre deux doubles \==. => \==texte à surligner==
:::
:::spoiler *(détails)* **🌍 Caractères spéciaux**
:::info
* 🌍 🔍 ♿ 📴 https://www.webfx.com/tools/emoji-cheat-sheet/
* <i class="fa fa-battery-quarter" aria-hidden="true"></i> <i class="fa fa-camera-retro fa-3x"></i> fa-3x https://fontawesome.com/v4/icons/
* Exemples fontawesome https://fontawesome.com/v4/examples/
:::spoiler **💡 Caractères webfx utiles** :
### 🤔 😉 😴 🤐 🤨 👁️ 💤 💭 ✍ 👉
### 🧠 🗣 🌍 🌐 🧭 ⚓ 🛟 ⏱ 🕑
### 🎥 🎦 🧿 🔘 🥽 🎬 🔎 📊 🗓 🌀 🎯 🕹 🎮 🔊 🎧 🔆 🔅 ☀ ⭐ ✨ 🔥 🌟 ❄ ⚽ ♣ ♦ ♥ ♠ 🧿
### ⌨ 📃 📄 📝 📸 🖼 ✏ 🏅 🥇 🥈 🥉
### 🏷 📭 📝 📌 📕 📗 📓 🗑 ✂ 🗝 🛠 ⚙ 🪣 🧯
### 🔇🎵 🔊 🎤 🖥 💡 💻🖱 ⌨ 🎥🔍 🔦 💡 📵 🚷
### ⬆ ↗ ➡ ⬇ ⬅ ↔ ⏹ ⚛ ☯ ▶ ⏩ ⏯ ⏹ ⏺ ♻
### 🔗 ⚙ 🛠 ⚠ 💥 ⛔ 🚦🛑 🚨 🔝 ❗ ❓ ⁉ ✖ ➕ ➖ ➗ 🟰 ♾ 💲 # ✳ ✴ ❇ ® © ☑ ✅ ❌ ❎
### #️⃣ 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔤 🆗 🆕 🆘 📶 🔄
### 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ 🔳 🔲 ◼ ◻ ◾◽ ▪ ▫
### 🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🔘
### ✍ 📝💻📚🎯🗓🔗🔍📝🎬💡📌👨👧👨👩👧👦 👁️👏 ⏰🕑📺📍📴 📧
### © ®
:::info
:::spoiler **😊 autre classement :**
1. Éducation & Apprentissage
📚 (livres) : Apprentissage général
🖍️ (crayon de couleur) : Créativité, activités éducatives
🏫 (école) : Environnement scolaire
📖 (livre ouvert) : Lecture ou apprentissage
🧑🏫 (enseignant) : Formation, enseignement
🧠 (cerveau) : Connaissance, réflexion
✏️ (crayon) : Écriture, prise de notes
2. Technologie & Innovation
💻 (ordinateur portable) : Outils numériques
📱 (smartphone) : Mobilité, apprentissage numérique
🌐 (globe avec un réseau) : Connectivité, ressources en ligne
⚙️ (rouage) : Processus, mécanismes
🤖 (robot) : Automatisation, IA
🔌 (prise électrique) : Énergie, connexion
3. Communication & Collaboration
💬 (bulles de dialogue) : Discussions, communication
📧 (enveloppe) : E-mails ou contacts
🤝 (poignée de main) : Partenariats, collaboration
🗣️ (visage parlant) : Présentation ou intervention
🔄 (flèche circulaire) : Feedback ou itération
4. Organisation & Progression
✅ (coche verte) : Objectifs atteints
🕒 (horloge) : Gestion du temps
📅 (calendrier) : Planification
📊 (graphe en barres) : Données ou statistiques
📈 (flèche vers le haut) : Progression, amélioration
🌟 (étoile) : Priorités ou excellence
5. Environnement et bien-être
🌱 (jeune pousse) : Croissance ou durabilité
🌍 (planète) : Écologie ou globalité
❤️ (cœur) : Bien-être, engagement émotionnel
🧘♂️ (personne méditant) : Santé mentale, équilibre
:::
:::spoiler *(détails)* **Ignorer** un **caractère spécial** (\ devant le caractère à élider (* - \\ ...))
:::info
**\ devant le caractère à élider**
* exemple
\* 2 (pour éviter la fonction puce du caractère * => \\* 2)
:::success
Astérisque : *
Trait d’union : -
Souligné : _
Parenthèses : ()
Crochets : []
Accolades : {}
Point : .
Point d’exclamation : !
Dièse : #
Accent grave :
Barre oblique inversée : \
:::
### 🔵 **Tableaux**
:::spoiler *(détails)* Tableaux 
:::success
<center>
| Colonne1 | Colonne 2 | Colonne 3 |
|:------------ |:------------:| -------------:|
| :arrow_left: | :arrow_down: | :arrow_right: |
</center>
Pour créer des tableaux, il faut utiliser le bouton <i class="fa fa-table" aria-hidden="true"></i>
ou directement encadrer le nom des colonnes par |. La dimension s'adaptera au contenu.
Une ligne de - - - apparaitra pour symboliser la séparation entre la ligne des titres et les lignes de cotenus.
Pour gérér l'alignement d'une colonne:
:- - - à gauche, :- - -: centré, - - -: à droite
:::
### 🔵 **Listes-Cases à cocher**
:::spoiler *(détails)* **Case à cocher** 
:::info
- [ ] case vide =>  ou tiret suivi d'un double crochet avec un espace entre => - \[ \]
- [x] case cochée
:::
::: spoiler *(détails)* Liste **numérotée** 
:::info
1. Premier item d'une liste numérotée
2. Deuxième item
* sous-item 1 (décaler le contenu à droite pour obtenir une sous-liste)
* sous item 2
17. *Le '17' écrit dans l'éditeur est automatiquement corrigé en '3' dans la visualisation.*
:::
:::spoiler *(détails)* Liste **à puces** 
:::info
* un item de liste à puces
* un autre item
* un autre item
* un sous-item
* un autre sous-item
* 3e niveau
* ...
:::
:::spoiler *(détails)* Liste **descriptive**
:::info
Titre de la liste
\: suivi du texte de la description
Catégorie 1
: description de la catégorie 1
éventuellement sur plusieurs lignes
Catégorie 2
: description de la catégorie 2
éventuellement sur plusieurs lignes
Catégorie 3
: description de la catégorie 3
éventuellement sur plusieurs lignes
:::
:::spoiler *(détails)* **Citation, Code**,
:::warning
* **citation** 
> \>devant la ligne de citation.
> \> à renouveller pour chaque ligne
>> \>\> pour 2 lignes
:::success
* **code** \`\`\` suivi du langage= si besoin ; à la ligne, collage du code ; terminé par à la ligne \`\`\` 
``` python=
print("Hello World")
```
:::
### 🔵 **Cadres colorés, menu escamotable**
:::spoiler (*déplier*) **bloc escamotable** (=> **:::spoiler** titre ; **contenu** du bloc ; **\:::** en fin de bloc)
:::success
(=> **:::spoiler**) suivi du titre **\:::** en fin de paragraphe pour fermer. *(bloc vert ::: success)*
:::
:::info
:::spoiler (*détails*) **cadres de couleur enchâssés** => **:::success** (ou :::info, :::danger, :::warning) ; **contenu** du bloc ; **\:::** en fin de bloc
* blocs de couleur en cascade => les ::: en fin de dernier bloc pour fermer la série.
:::success
**\:::success** (vert), bloc en cascade, suivi du texte à mettre en valeur, terminé par **\:::** à la ligne.
:::info
**\:::info** (bleu), bloc en cascade, suivi du texte à mettre en valeur
:::danger
**\:::danger** (rouge), bloc en cascade, suivi du texte à mettre en valeur
:::warning
**\:::warning** (jaune) suivi du texte à mettre en valeur, terminé par **\:::** à la ligne pour bloc séparé.
:::
## 3️⃣ **Liens (URL, image...) et ancres**
:::spoiler *(détails)* Liens **URL** 
:::info
* **Lien** : 🔗 [**URL-tuto CodiMD**](https://codimd.apps.education.fr/6iXTVWj0RkiKflzoC1OCJQ?both) : [titre]\(URL) => titre entre crochets [titre] suivi de l'URL entre parenthèses (URL)
:::
:::spoiler *(détails)* **Images** (*accepte le **copier-coller**, génére automatiquement son lien*) 
* **Image** : par copier-coller ou  => ![nom image] suivi de l'URL entre parenthèses (URL)
* **Imposer taille de l'image** :
* ++Largeur imposée++ : en fin de d'URL, ajouter =Lx *(égal largeur L en pixel suivi de x)* : exemple.png =100x : 
* ++Hauteur imposée++ : en fin d'URL, ajouter =xH *(égal hauteur H en pixel précédé de x)* : exemple.png =x20 : 
* **Lien sur une image** \[!\[Texte alternatif de l'image](URL_de_l_image)](URL_du_lien)
exemple : [](https://pedagogie.ac-clermont.fr/numerique-educatif/category/documentation-et-tutoriels/)
:::
:::spoiler *(détails)* **Notes** bas de page
**Note de renvoi1** [^note1], mot-clé suivi de **\[^RefNote]** et **\[^Refnote]:** pour le texte de renvoi en bas de page
[^note1]: Note1 visible en bas de page
* exemple 2 **texte de renvoi 2** à voir en bas de page [^note2]
[^note2]: Note2 du renvoi2
:::
:::spoiler *(détails)* **Ancres**
:::info
Renvoi possible dans la page à partir de l'URL de tous les titres (copie de l'URL par bouton droit (Copier le lien)
exemple : [**Début du document publié**](https://codimd.apps.education.fr/s/Iv4PzwF8S#Tutoriel-rapide-CodiMD-ac-clermont)
Renvoi sur une ancre de la page (à venir)
:::
## 4️⃣ Intégration ressources numériques
::: spoiler *(détails)* Exemples intégration PDF, Vidéo, Site
:::info
* PDF : {%pdf https://manuals.plus/wp-content/uploads/2024/08/Sphero-Mini-Coding-Robot-Ball-User-Manual.pdf %}
:::success
* SITE : {%pdf https://photon.education/fr/projet-kit-robotique/ %}
* PDF d'un wordpress : {%pdf https://pedagogie.ac-clermont.fr/disciplines/sii-technologie/wp-content/uploads/sites/24/2022/09/brevet_sept_2022_sujet_techno_couverture_Roland-Garros.pdf %}
:::danger
* VIDEO (ne garder que le code youtube de la vidéo) : {%youtube 5nnxqszZltE %}
* code integration iframe de TUBE
<iframe title="Présentation de CodiMD (et du code Markdown) en moins de 2 minutes" width="280" height="158" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
:::
#### ➡ Autres ressources
:::spoiler *(détails)* autres tutos :
* https://codimd.apps.education.fr/s/features
* https://drane.ac-normandie.fr/apps-education-codimd
* https://plmdoc.math.cnrs.fr/utilisateurs/codimd/
* Diaporama : https://codimd.apps.education.fr/p/OjyyDtqbZ#/
* Vidéo : https://youtu.be/kmefX5F7cpI
:::