Qu’est-ce que CodiMD ?

CodiMD est un éditeur collaboratif synchrone. Le document produit peut contenir du texte mis en forme, des liens, des images, des vidéos, des graphiques, des formules mathématiques ou encore du code informatique. Les paramètres de mise en page par défaut rendent le document particulièrement lisible.

Le document produit est une page web qui peut être partagée en lecture ou en écriture par un lien, et peut être exportée en différents formats.

Exemples d’usages

• Communiquer pour consultation une page Web à des élèves ou collègues par l’intermédiaire d’un lien (déposé sur l’ENT, Moodle, etc.). La page Web peut être modifiée par l’enseignant à tout moment, sans changement du lien transmis.
  Exemples : un corrigé d’un exercice de baccalauréat en NSI une page de présentation de la spécialité NSI
• Mettre à disposition de collègues ou d’élèves un pad collaboratif permettant plus de possibilités de mise en forme qu’un Etherpad (tel que celui que l’on trouve sur l’ENT). Il est possible d’annuler des modifications grâce à l’historique du document.
  Exemple : une série d’exercices à corriger/valider collectivement par les élèves
• Mettre à disposition des élèves un espace de création et de publication de page Web : l’enseignant crée la page vierge et transmet le lien aux élèves qui créent le contenu, sous la modération de l’enseignant. Une fois les pages Web finalisées, l’enseignant restreint l’accès à la lecture seule et les pages peuvent ensuite être partagées avec les autres élèves.

Accéder à CodiMD

CodiMD est l’une des applications disponibles sur le portail.apps.education.fr/. Elle apparaît sous le nom Pad avancé - CodiMD.

Ouvrir l’application puis cliquer sur + Nouvelle note.

Créer un document

L’interface de création de document est double : une partie pour éditer le document et une partie pour visualiser le document HTML produit.

Le document édité est au format Markdown, c’est un langage de balisage léger, simple, facile à lire et à manipuler.
De plus, un formatage simple peut être obtenu à l’aide de la barre d’outils de l’interface, sans aucune connaissance de la syntaxe Markdown.

On peut afficher l’éditeur seul ou le document produit seul en utilisant le sélecteur de vues :

Structurer le document

Titres

Il y a 6 niveaux de titres disponibles, le niveau 1 correspondant au titre du document, le niveau 2 aux titres des parties, etc. Pour définir un titre :

• [barre d’outils] utiliser le bouton H ; cliquer plusieurs fois pour obtenir les différents niveaux de sous-titres ;
• [syntaxe Markdown] saisir un ou plusieurs # devant le texte du titre : le nombre de # définit le niveau du titre.

L’enregistrement est automatique et le fichier apparaît dans l’historique sur la page d’accueil de CodiMD sous le nom du titre de niveau 1 du document.

Voir en ligne un exemple illustrant les niveaux de titres

En mode visualisation (), on dispose à droite d’un menu de navigation dans le document, s’appuyant par défaut sur les titres de niveaux 1 et 2.

Listes et cases à cocher

On peut générer des listes à puces, des listes numérotées et des listes descriptives :

• [barre d’outils] les listes à puces et listes numérotées disposent d’un bouton dédié :
• [syntaxe Markdown] faire précéder les items d’un numéro suivi d’un point (1., 2. etc.) pour une liste numérotée ou de l’un des symboles *, +, - pour une liste non numérotée.
  Pour une liste descriptive, chaque entrée doit débuter par un titre et chaque description commence par un double point.

Voir en ligne un exemple illustrant les types de listes et les cases à cocher

Tableaux

Pour générer des tableaux :

• [barre d’outils] cliquer sur le bouton dédié (Table) pour faire apparaître un tableau de 3 colonnes, modifiable ;
• [syntaxe Markdown] saisir le nom des colonnes et les encadrer par des | puis taper sur Entrée.

Voir en ligne un exemple illustrant les tableaux

Images

Pour insérer une image :

• Il est possible de réaliser un copier/coller d’une image ou d’importer un fichier image à l’aide du bouton (au-dessus de la barre d’outils).
• [barre d’outils] Le bouton permet d’afficher ![](https://) qui reste à compléter par l’adresse de l’image, ce qui permet d’afficher une image hébergée sur un autre site web ou cloud, sans l’importer sur les serveurs de CodiMD.
• [syntaxe Markdown] Pour insérer une image en ligne, saisir ![](url de l'image).
  Pour préciser la largeur et/ou la hauteur de l’image, insérer après l’url =Lx ou =xH ou =LxH en remplaçant L et/ou H par leur valeur.

Voir en ligne un exemple illustrant les images

Cadres

Pour générer des cadres colorés, saisir::: puis sélectionner le type de cadre parmi ceux qui sont proposés : spoiler, danger, warning, info, success.

Le contenu situé après la déclaration du cadre et avant les symboles de fin::: est présenté dans un cadre coloré dont la couleur dépend du type choisi.

Voir en ligne un exemple illustrant les cadres

Mettre en forme le document

Mise en forme des caractères

Pour mettre en forme des caractères :

• [barre d’outils] Les boutons B, I, S permettent de mettre un texte en gras, en italique ou de le barrer ;
• [syntaxe Markdown] on encadre le texte d’un symbole simple ou double :
  • * : italique
  • ** : gras
  • ~~ : barré
  • ++ : souligné
  • ^^ : ^exposant
  • ~ : _indice
  • == : surligné

Voir en ligne un exemple illustrant les mises en forme de caractères

Lien

Pour créer un lien :

• [barre d’outils] Le bouton permet de créer des liens ;
• [syntaxe Markdown] Saisir entre crochets le texte du lien suivi, entre parenthèses, de l’adresse du lien : [texte du lien](url du lien)

Voir en ligne un exemple illustrant les liens

Note de bas de page

Pour créer une note de bas de page :

• [syntaxe Markdown] support[^référence].
  Puis insérer dans le texte : [^référence] : texte de la note.
  Les notes sont numérotées, quelles que soient les références choisies.

Voir en ligne un exemple illustrant les notes de bas de page

Formule

Pour insérer une formule :

• [syntaxe Markdown] Saisir entre deux $ la formule LaTeX pour un affichage en ligne et entre deux $$ pour un affichage en bloc, centré (mode display)

Voir en ligne un exemple illustrant les formules LaTeX

Code

• [syntaxe Markdown] Pour écrire du code en ligne, saisir entre ` (accent grave ou backtick) le texte de type code.
  Pour écrire un bloc de code, saisir 3 accents graves puis le nom du langage pour ouvrir le bloc, et à nouveau 3 accents graves pour le fermer.

Voir en ligne un exemple illustrant le code

Graphe

L’un des langages reconnus dans les blocs de code est graphviz. En saisissant le code d’un graphe dans un bloc de code dans l’éditeur, le rendu est un graphe.

Voir en ligne un exemple illustrant les graphes avec graphviz

Partager le document

Droits de contribution

Un clic sur EDITABLE (réglage par défaut) permet de déterminer les contributeurs du document.
Le cas le plus restrictif est Private (le document n’est accessible pour personne d’autre que son propriétaire, même pas en lecture).

Pour permettre à des collègues (connectés à apps.education.fr) de contribuer, choisir Editable.
Pour permettre à des élèves de contribuer, choisir Freely.
Pour permettre seulement la consultation, choisir Locked.

Publication

Après avoir déterminé les droits de contribution, cliquer sur Publier :

Recopier l’url de la barre d’adresse du nouvel onglet ouvert dans le navigateur, et partager cette adresse avec les contributeurs/lecteurs.
S’ils en ont le droit, ils peuvent modifier le document, même de manière synchrone.
Sinon, ils peuvent seulement le consulter.

Le lien de publication est unique et il est possible de modifier à tout moment le statut du document. On peut par exemple figer une version élaborée collectivement par des élèves en passant le statut de Freely à Locked ou empêcher l’accès à un document, même après avoir diffusé le lien de partage en passant le statut à Private .

Aller plus loin avec CodiMD

Sauvegarder ses fichiers

Les fichiers que l’on a créés, ceux auxquels on a contribué, et ceux que l’on a consultés, apparaissent par défaut dans l’historique. Pour les supprimer de son historique, il suffit de cliquer sur la croix de l’icône du fichier.
En cliquant sur son nom d’utilisateur (en haut à droite) depuis la page d’accueil, le menu déroulant propose d’Exporter les données utilisateur. Cette action télécharge un dossier contenant tous les fichiers dont l’utilisateur est l’auteur, au format .md.
Les fichiers auxquels on a contribué, ou que l’on a consultés, ne sont pas téléchargés, à moins d’en avoir fait une copie personnelle.
Inversement, les fichiers supprimés de son historique, mais dont l’utilisateur est l’auteur, apparaissent toujours dans le dossier téléchargé.

Métadonnées du document

Le document produit est une page web, pourvue de métadonnées. On peut spécifier certaines métadonnées depuis l’éditeur, comme les mots-clés ou le titre du document. Le format de ces métadonnées est YAML. Ces informations n’apparaissent pas dans la vue html.

Mots-clés

Les mots-clés sont affichés sur l’onglet Historique de CodiMD et un outil de recherche de tags permet de filtrer les mots-clés. En l’absence de dossier, cette option s’avère vite indispensable pour retrouver ses fichiers.

Pour associer des mots-clés au document, saisir en tout début de document :

--- tags: motclé1, motclé2, motclé3 ---

Titre

On peut associer au fichier un autre titre que le titre de niveau 1 contenu dans le document. Pour cela on attribue une valeur à la métadonnée title.

--- title: Titre du fichier ---

Voir en ligne une documentation concernant les métadonnées

Insérer un contenu HTML

On peut insérer directement dans l’éditeur de CodiMD des balises HTML, ce qui permet de nombreux usages.
Un exemple simple est l’insertion de balises<iframe> pour intégrer à la page Web un contenu externe : vidéo, exercice, etc.

Mais bien d’autres personnalisations sont possibles, en paramétrant le style du document.

Cédric Eyssette, enseignant de philosophie, propose un codiMD présentant de nombreux modèles personnels, tous réalisés dans CodiMD et modifiables : flashcards , dialogue type SMS, timeline, murs d’images, etc.

Voir en ligne les modèles CodiMD proposés par Cédric Eyssette