--- tags: tuto, diapo, rpdm2, exemple title: Tutoriel pour les codimd description: différentes choses pour découvrir les codimd author: Mathieu Drillet --- # Tutoriel pour les codimd :::spoiler sommaire [TOC maxLevel=2] ::: :::spoiler sommaire détaillé [toc] ::: <!-- mettre un commentaire --> ## Introduction ### Généralités Les codimd sont proposés sur la plateforme apps.education.fr. Le codimd, c'est un éditeur collaboratif en temps réel de notes et diaporama, au format MarkDown. Dans votre espace, vous retrouvez les codimd par des mots clés. <center>  </center> ### Motivation C'est une manière "propre et jolie" de prendre des notes, de partager des informations, des organisations avec les élèves, les collègues. Contrairement à un pdf, le codimd sera toujours à jour avec le même lien de partage. On a accès au document sur n'importe quel ordinateur, il suffit de se connecter sur son compte. On peut aller voir [ici](https://codimd.apps.education.fr/p/_jNZOSxo8#/) un diaporama. ## Markdown Il n'est pas nécessaire de maitriser sur le bout des doigts le markdown. Vous pouvez "piquer" des morceaux de codes de n'importe quel codimd existant. Il suffit de cliquer sur le crayon 🖌 puis sur le double volet : <center>   </center> De plus, les IA sont assez habiles avec le markdown. ## Cadres Certains cadres sont déjà pré-définis il suffit de taper ":::" puis un des mots clé : :::success success pour un cadre vert ::: :::info info pour un cadre bleu ::: :::warning warning pour un cadre orange ::: :::danger danger pour un cadre rose ::: :::spoiler Cliquer pour dérouler spoiler pour un cadre déroulant ::: ## Tableaux | Column 1 | Column 2 | Column 3 | | --------:|:-------- | :--------: | | Texte à droite | Texte à gauche | Texte centré | ## Symboles 💡<i class="fa fa-lightbulb-o" aria-hidden="true"></i> Vous pouvez insérer des symboles avec, par exemple, ce site https://fontawesome.com/v4/icons/ ou des émojis avec https://www.webfx.com/tools/emoji-cheat-sheet/ ## Liens * On peut insérer des liens externes * en copiant/collant l'adresse de destination : https://mathsalors.jimdofree.com/ * en utilisant la barre d'outils et en cachant l'adresse comme [ici](https://mathsalors.jimdofree.com/). * On peut insérer des liens internes comme celui-ci vers le [sommaire ⬆](#Tutoriel-pour-les-codimd). ## Type d'écriture ++Souligner entre deux ```++```++ ==Surligner== entre deux ```==``` *en italique entre deux* ```*``` **en gras entre deux** ```**``` ## Intégrer ### Image Pour intégrer une image il suffit de faire un glisser/déposer. Pour adapter la taille de l'image, on peut ajouter après le nom de l'image ```nom.extension =Lx``` où ```L``` est la largeur en pixel. ### Vidéo Pour intégrer une vidéo écrire le code youtube de la vidéo à la place des ```...``` ```{%youtube ... %}``` {%youtube BkxhlAep6xk%} ### Maths On peut insérer de belles formules mathématiques en insérant du code ```$```\LaTeX$ entre un ou deux $. $\left(\dfrac{4}{5}\div (-2)+2\right)\times 5$ ### Géogébra <iframe scrolling="no" title="Tables de multiplication" src="https://www.geogebra.org/material/iframe/id/ybfwqtnf/width/800/height/693/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/true/ctl/false" width="800px" height="693px" style="border:0px;"> </iframe> ### Scratch <center> <iframe src="https://scratch.mit.edu/projects/1171300747/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe> </center> ### Questionnaire <iframe src="https://framaforms.org/questionnaire-de-preparation-a-la-reunion-dequipe-du-college-de-levroux-1725972930" width="100%" height="800" border="0"></iframe> ### PDF Pour intégrer une vidéo écrire le code youtube de la vidéo à la place des ```...``` ```{%pdf ... %}``` {%pdf https://www.apmep.fr/IMG/pdf/Brevet_Am_du_Nord_4_06_2025_DV_JCS_2.pdf%} ### Page web <iframe src="https://pedagogie.ac-orleans-tours.fr/spip.php?article1485 " width="600" height="450"></iframe> Pour cela on peut utiliser le code ci-dessous : ```markdown <iframe src="https://adresse_de_la_page.com " width="600" height="450"></iframe> ``` ### Pearltrees On peut intégrer une collection de Pearltrees qui se mettra à jour automatiquement en fonction des différents ajouts. <iframe src="https://www.pearltrees.com/drilletmaths/codimd/id93597690?embed=2&d=202506101043" width="560" height="413" style="border:0px;" allowtransparency="true"></iframe><span style="display:block; padding-top:2px; color:#818181; font-size:13px;"><a href="https://www.pearltrees.com/drilletmaths/codimd/id93597690" style=" color:#818181; font-size:13px;" target="_blank">Codimd</a>, par <a href="https://www.pearltrees.com/drilletmaths" style=" color:#818181; font-size:13px;" target="_blank">drilletmaths</a></span> Pour cela cliquer sur "intégrer" et sélectionner la taille désirée. <center>  </center> ### Codes On peut insérer des lignes de codes #### LaTeX ```latex \documentclass{article} \begin{document} \section*{Exercice 2 : \hfill 20 points} \begin{itemize}[label= \small $\bullet~~$] \item Les points A, B, E et M sont alignés \item Les points A, C et D sont alignés \item ADE est un triangle rectangle en E \item ABC est un triangle rectangle en B \item AD $= 70$ m \item BC $= 30$ m \item AC $= 50$ m \item $\widehat{\text{DME}} = 60\degres$ \end{itemize} \end{document} ``` ### Python ```python def factorielle(n): if n == 0: return 1 else: return n * factorielle(n-1) print(factorielle(5)) # Affiche 120 ``` ### HTML ```html <!DOCTYPE html> <html> <head> <title>Page Titre</title> </head> <body> <h1>Bienvenue</h1> <p>Ceci est un exemple de page HTML.</p> </body> </html> ``` ### CSS ```css body { font-family: Arial, sans-serif; background-color: #f4f4f4; } h1 { color: #333; } ``` ## Exporter On peut exporter le document dans différents formats (.odt, .rtf, .docx) en utilisant pandoc dans Menu (en haut à droite). ### Imprimer On peut imprimer de différentes manières : https://a4.forge.apps.education.fr/ différentes appli de md https://marklab.forge.apps.education.fr/#les-applications ### Pandoc voir https://www.arthurperret.fr/cours/pandoc.html https://pandoc.org ## Mise en page Une mise en page sobre et efficace est proposée.  On peut personnaliser avec un peu de code en CSS (voir la partie ```style``` dans le source). ## Ecriture Les options possibles : | |Propriétaire lecture/écriture|Utilisateur apps-edu connecté lecture|Utilisateur apps-edu connecté écriture|Invité lecture|Invité écriture| |:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:| |<span class="text-nowrap"><i class="fa fa-leaf fa-fw"></i> **Freely** - Librement</span> |✔|✔|✔|✔|✔| |<span class="text-nowrap"><i class="fa fa-pencil fa-fw"></i> **Editable** - Éditable</span> |✔|✔|✔|✔|✖| |<span class="text-nowrap"><i class="fa fa-id-card fa-fw"></i> **Limited** - Limité</span> |✔|✔|✔|✖|✖| |<span class="text-nowrap"><i class="fa fa-lock fa-fw"></i> **Locked** - Verrouillé</span> |✔|✔|✖|✔|✖| |<span class="text-nowrap"><i class="fa fa-umbrella fa-fw"></i> **Protected** - Protégé</span> |✔|✔|✖|✖|✖| |<span class="text-nowrap"><i class="fa fa-hand-stop-o fa-fw"></i> **Private** - Privé</span> |✔|✖|✖|✖|✖| ## Ressources * La page de l'académique avec plein de ressources : https://pedagogie.ac-orleans-tours.fr/spip.php?article1485 * quelques modèles à explorer : https://codimd.apps.education.fr/s/bGcFVkgLS# * académie de Grenoble : https://codimd.apps.education.fr/s/features# * Tuto pour les diapo par V.Pantaloni : https://codimd.apps.education.fr/p/OjyyDtqbZ --- <div style="text-align:right;"> *Mathieu Drillet* </div> --- <style> .menu1 {color:#3333EE; font-size:20px;} .infos {background-color:#DDDDFF; color:#000000; font-size:16px;} h1{color:#FFFFFF;margin-bottom:.75em!important;background-color: #000080;border-bottom:3px solid #6e3dba!important;} h2{color:#000080;padding-top:0.5em;border-bottom:3px solid #000080!important;margin-bottom:.75em!important;} h3{color:#008080 ;padding-top:0.5em;margin-bottom:.75em!important;} h4{color:#00BFFF ;padding-top:0.5em;margin-bottom:.75em!important;} details { margin-bottom: 10px; border-radius: 6px; padding-top: 0.4em; box-shadow: 0 5px 10px -9px rgba(0, 0, 0.5, 0.5), 0 10px 10px -5px rgba(0.2, 0, 0.7, 0.2); } details > summary{ cursor: pointer; transition: .3s; user-select: none; padding: 0.3em; background-color: #000080; border-radius: 4px; font-family: 'Marianne'; color: #FFFFFF; } </style>