Tutoriel CodiMD ![](/images/Markdown.png =50x)

# <center> Tutoriel CodiMD ![](/images/Markdown.png =50x) </center> ![](/images/logo-cemea-mini.png =150x) Ceci est un résumé des fonctionnalités présentées en anglais [dans cette page](/features). ## :one: Introduction :pencil: CodiMD est une plateforme d'écriture collaborative, accessible à travers tous les navigateurs. Elle est basée sur la synthaxe Markdown, et la mise en forme peut être également faite à l'aide d'une barre d'outils. Pour sélectionner le mode d'affichage utiliser les boutons: ![](/images/boutons.png =90x) :lock: Le créateur peut décider qui peut modifier, qui peut consulter ce document avec le bouton ![](/images/publier.png). :::spoiler Afficher le tableau des droits | |Propriétaire lect/écrit|Authentifié lecture|Authentifié écriture|Invité lecture|Invité écriture| |:---------------|:--------------:|:------------:|:-------------:|:--------:|:-----------:| | **Freely**|✔|✔|✔|✔|✔| | **Editable**|✔|✔|✔|✔|✖| | **Limited**|✔|✔|✔|✖|✖| | **Locked**|✔|✔|✖|✔|✖| | **Protected**|✔|✔|✖|✖|✖| | **Private**|✔|✖|✖|✖|✖| **Seul le créateur peut modifier les permissions.** ::: :desktop_computer: Plusieurs formes de visualisation du document peuvent être obtenues à l'aide du menu : ![](/images/menu.png) ## :two: Mise en forme ### Titres et sommaire Il y a 6 niveaux de titres disponibles. Ils vont générer un sommaire automatique (3 premiers niveaux visibles directement). Pour définir un titre, vous pouvez utiliser le bouton **H** (cliquer plusieurs fois pour obtenir les niveaux de sous-titres), ou le précéder d'un ou plusieurs **#** (leur nombre définira le niveau du titre). --- ### Attributs de caractère Le texte sera en **gras** avec le bouton **B** ou entre deux doubles \**, Le texte sera en _italique_ avec le bouton __*I*__ ou entre deux \*, Le texte sera ~~barré~~ avec le bouton **~~S~~** ou entre deux doubles \~~. Le texte sera en ++souligné++ entre deux doubles \++. Le texte sera en ^exposant^ entre deux \^. Le texte sera en ~indice~ entre deux \~. Le texte sera ==surligné== entre deux doubles \==. Pour afficher le texte en rouge, il faudra l'encadrer par des balises \texte en rouge\. La mise en forme de citation se fait avec le bouton ou en la précédant d'un \>, suivi d'un choix éventuel de couleur. --- ### Liens et ancres Une adresse internet sera transformée automatiquement en lien cliquable. Vous pouvez créer des liens à l'aide du bouton ou en tapant entre crochet le texte du lien suivi entre parenthèse de l'adresse du lien. >[color=red] \[QWANT](https://qwant.com) affichera [QWANT](https://qwant.com) Pour faire référence à un titre du document il suffit d'indiquer comme adresse # suivi de son nom > \[Début](#-Tutoriel-CodiMD-) affichera [Début](#-Tutoriel-CodiMD-) > Pour ajouter une note de bas de page, taper entre crochets une référence puis à un autre endroit du document la même référence suivi de **:** et le contenu de la note. > note\[1]         \[^1]\: contenu de la note       affichera: note[^1] [^1]: contenu de la note --- ### Emojis :smiley: et Font awesome Pour afficher des Emojis, taper leur nom entre deux **\:**. Par exemple \:coffee: affiche :coffee:. La liste complète des emojis est [disponible ici](https://www.webfx.com/tools/emoji-cheat-sheet/). Pour afficher des icônes de fontawesome 4.7, il faut coller le code obtenu dans [fontawesome.com](https://fontawesome.com/v4.7.0/icons/). Par exemple \\ affiche : . --- ### Listes Vous pouvez générer des listes à puces ou numérotées à l'aide des deux boutons ou en précédent les items d'un numéro suivi d'un point ou d'une *, +, -. >1. Premier item >2. deuxième item: > * Sous-item 1 > * Sous-item 2 Mais également des cases à cocher avec le bouton ( - \[ ] pour une case vide et - \[x] pour une case cochée). >- [ ] A faire >- [x] OK --- ### Tableaux Pour créer des tableaux, il faut utiliser le bouton 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 <center> >| Colonne1 | Colonne 2 | Colonne 3 | >|:------------ |:------------:| -------------:| >| :arrow_left: | :arrow_down: | :arrow_right: | </center> --- ### Encadrés Pour faire des cadres, il faut utiliser le triple **\:::** associé aux mots clés **success** (cadre vert), **danger**(cadre rouge), **warning**(cadre jaune) et **info**(cadre bleu). Lorsqu'il est associé à spoiler, il peut afficher un élément à déplier. >:::success >::: spoiler Déplier >:::danger >:+1: >::: ## :three: Intégration images, vidéos,... Il est possible d'intégrer de nombreux types de ressources: images, sons, vidéos, pdf, graphiques, maths, partitions, ... ### :sunrise: Images Pour insérer une image, utiliser le bouton ou faites glisser/déposer l'image à l'emplacement souhaité. Sinon taper \![ ](adresse de l'image). Pour spécifier la taille image rajouter **=LxH** ou seulement **=Lx** après le nom de l'image (avec L largeur et H hauteur). --- ### Youtube et ![](/images/peertube.png =14x) Peertube Pour incruster une video Youtube ou Peertube il faut écrire l'identifiant de la vidéo entre **\{%youtube** et **\%}** ou **\{%peertube** et **\%}**. Pour les vidéos Peertube, vous pouvez également copier/coller le code d'intégration comme : ```! <iframe title="Tu hésites à entrer en formation aux Ceméa ?" src="https://videos.cemea.org/videos/embed/934c7a97-061f-4258-8cfc-a82cf8e72a79" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe> ``` pour obtenir : <iframe title="Tu hésites à entrer en formation aux Ceméa ?" src="https://videos.cemea.org/videos/embed/934c7a97-061f-4258-8cfc-a82cf8e72a79" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe> --- ### Diaporamas Pour transformer vos notes en diaporama, il faut insérer ce bloc de code en haut de votre texte : ``` --- type: slide slideOptions: transition: slide theme: blood --- ``` Différentes options de transition ou thèmes sont possibles. * transitions : none/fade/slide/convex/concave/zoom (au choix) * theme : black/white/league/beige/sky/night/serif/simple/solarized/blood/moon (au choix) Pour le visualiser, utiliser le "Menu" / "Mode Présentation". Une adresse de diffusion sera générée spécialement pour le mode Diaporama. Voir [Cet exemple de diaporama](/slide-example-fr) --- ### Fichiers PDF Pour incruster un document PDF, il faut écrire l'adresse du fichier PDF entre **\{%pdf** et **\%}**. {%pdf https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf %} --- ### Maths Les formules mathématiques **L^A^T~E~X** peuvent s'afficher en les encadrants entre deux \$ ou deux doubles \$\$. --- ### Code Un programme informatique peut être mis en forme entre deux ` ou deux triples ``` suivi éventuellement du nom du language, = pour la numérotation des lignes ``` python= print("Hello World") ``` --- ### :chart_with_upwards_trend: Graphiques Plusieurs types de graphiques peuvent être intégrés : [Flow Charts](http://adrai.github.io/flowchart.js/), [Graphviz](http://www.tonyballantyne.com/graphs.html/), [mermaid](http://knsv.github.io/mermaid), [sequence diagrams](http://bramp.github.io/js-sequence-diagrams/), [vega](https://vega.github.io/vega-lite/docs) ```vega { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": "https://vega.github.io/editor/data/barley.json"}, "mark": "bar", "encoding": { "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"}, "y": {"field": "variety", "type": "nominal"}, "color": {"field": "site", "type": "nominal"} } } ``` --- :musical_note: Il est possible d'intégrer une partition avec la [synthaxe abc](http://abcnotation.com/learn) : ```abc X:1 M:4/4 K:G |:GABc dedB| ``` --- <div style="float:right;text-align:right;font-size=footnote;"> Document original de bertrand.chartier at ac-grenoble.fr</div> <div style="float:right;text-align:right;font-size=footnote;"> Document modifié par administrateur at cemea.asso.fr</div>