# Tutoriel pour les diaporamas codimd touche ❔ pour les raccourcis clavier. Note: Il peut y avoir des notes visibles seulement par le présentateur. --- ## 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 <div style="text-align:justify;"> * <span> 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. <!-- .element: class="fragment" data-fragment-index="1" --></span> * <span>Contrairement à un pdf, le codimd sera toujours à jour avec le même lien de partage.<!-- .element: class="fragment" data-fragment-index="2" --></span> * On a accès au document sur n'importe quel ordinateur, il suffit de se connecter sur son compte.<!-- .element: class="fragment" data-fragment-index="2" --></span> <span> On peut aller voir [ici](https://codimd.apps.education.fr/s/DZXPEkds_#) une note. <!-- .element: class="fragment" data-fragment-index="3" --></span> </div> --- ## Markdown <div style="text-align:justify;"> 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 : *De plus, les IA sont assez habiles avec le markdown.* </div> <center>   </center> --- ## 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 <center> | Column 1 | Column 2 | Column 3 | | --------:|:-------- | :--------: | | Texte à droite | Texte à gauche | Texte centré | </center> --- ## 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/ * des émojis avec https://www.webfx.com/tools/emoji-cheat-sheet/ --- ## Liens <div style="text-align:justify;"> * 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). </div> --- ## 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="600" 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 Idem pour une page web : ```markdown <iframe src="https://adresse_de_la_page.com " width="600" height="450"></iframe> ``` <iframe src="https://pedagogie.ac-orleans-tours.fr/spip.php?article1485 " 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 :  --- ## 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 --- Mathieu Drillet <p xmlns:cc="http://creativecommons.org/ns#" > <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p> --- <style> .reveal ul { list-style-position: outside; margin-left: 10px; } .reveal .slides img { border: 1px solid #ccc; /* Bordure grise de 1 pixel */ /* box-shadow: none; /*Supprimer l'ombre (si elle est appliquée) */ } </style>