# L'application CodiMD ## Quand utiliser cette application ? ### Si vous avez besoin de ... - Collaborer avec des collègues sur le même document ? Vous voulez éviter la longue série de mail avec des versions différentes du document en construction :face_palm: - Vous souhaitez vous focaliser sur le fond et laisser l'odinateur s'occuper de la mise en forme ? Alors cette application est celle qu'il vous faut ! Pas de menus, options compliquées, c'est une machine à écrire collaborative. C'est aussi un moyen de publier du contenu sur le WEB et de le partager à des élèves. ### Fonctionnalités clés 1. L'éditeur de votre texte est en ligne, pas besoin d'installer un logiciel. Cela fonctionne sur n'importe quelle machine reliée sur internet. 2. Partager du contenu à l'aide d'un lien (avec une gestion de droits de lecture, écriture, modification) 3. Avoir un document structuré dont le contenu peut être repris sur MAC et PC. Vous pouvez même l'exporter au format word. 4. Ecrire du code, des équations, des diagrammes, insérer des images sans perdre en productivité, insérer des liens. Bref, la question n'est pas est-ce qu'on peut le faire mais comment peut-on le faire. ## Tour d'horizon de l'interface :iphone:  Lorsque vous créez votre première note, vous obtenez en haut à gauche de votre espace 2 barres d'outils. ### Outils pour l'éditeur - Crayon: Afficher uniquement l'éditeur sans le rendu de votre texte. Tout ce que vous saisissez dans l'éditeur est affiché. - Les 2 panneaux: La fenêtre se sépare en deux: à gauche l'éditeur à droite le rendu de votre texte. - l'oeil: uniquement le rendu tel qu'il sera vu par l'internaute. - Lune: permet de basculer en mode sombre (on aime ou pas) - ? pour avoir de la documentation en plus de celle-ci ! - :camera_with_flash: vous permet d'insérer une image depuis un fichier image de votre ordinateur. C'est comme ça que j'ai fait pour afficher l'image de l'interface dans ce texte. ### Outils d'édition - B, I et S c'est assez classique: mettre en gras, en italique ou barré une partie du texte. Sélectionner puis cliquez sur l'outil pour appliquer la mise en forme. - H va vous permettre d'appliquer le statut de titre à un texte préalablement sélectionné. - </> : Pour insérer un bloc de code mais il ne sera pas exécuté. - " : Pour faire une citation - liste de puces non numérotées puis numérotées - liste de coches - :link: Pour éditer un lien cliquable - :mountain: Pour insérer une image dont vous connaissez le lien sur internet. Je vous recommande plutôt d'utiliser l'icone camera. - :1234: Pour insérer un tableau, c'est assez pénible en mode texte mais avec un exemple, on y arrive très bien. - – Insérer une ligne de séparation - :left_speech_bubble: Insérer un commentaire, pratique quand on travaille à plusieurs ---- ## Un petit exemple :desert_island: Le document que vous lisez a été rédigé avec CodiMD. A ce stade, vous voyez des titres et des puces et aussi des emojis. Or tout ce que permet de faire Codim est de saisir du texte. Oui, mais le texte que vous allez écrire au clavier n'est pas identique à celui qui s'affiche dans le document finale. **Ce que vous voyez n'est pas exactement ce que vous écrivez.** :eyes: ### Aperçu rapide :mag: En cliquant sur le crayon ou les deux panneaus situés dans la barre d'outils pour l'éditeur, vous allez accéder au texte source de cette page. Vous pourrez alos repérer les caractères magiques qui ont été saisis et n'apparaissent pas sur le document que vous lisez. Ces caractères ont un effet sur le document. Dans la suite on les nomme **balises**. **Vocabulaire**: La présence des balises dans le texte que vous écrivez dans l'éditeur confère à ce texte ce qu'on appelle un format. Ce format est le **Markdown**. C'est un format très utilisé. Ce format permet de produire des écrits aussi complexes que des articles, mémoires ou livres. Pour une documentation sur markdown suivez ce [lien](https://daringfireball.net/projects/markdown/) ### Titre, sous-titre, etc Pour écrire un titre, il suffit d'écrire sur une nouvelle ligne `# Mon titre`. Le caractère '#' n'apparaîtra plas mais le logiciel interprétera sa présence comme la présence d'une titre de niveau 1. Pour écrire un sous-titre soit un titre de niveau 2, placer deux fois `#`comme par exemple: `## Sous titre` *Remarque*: Les titres et sous-titres n'ont pas de préfixe I/ ou 1°) ils ne diffèrent visuellement que par la taille de la police. Et vous n'y pouvez rien, c'est le prix de la sobriété. ### Insérer une image Vous possédez un fichier d'une image stockée sur votre ordinateur et vous souhaitez l'insérer dans votre texte. Voici la procédure: 1. Cliquez sur l'icône appareil photo dans la barre d'outil de l'éditeur. 2. Choississez votre fichier, ici `mon_image.png` 3. L'éditeur insère dans votre texte un code qui ressemble à: `` ### Insérer un tableau 1. Pour insérer un tableau, cliquez sur l'icone grille dans la barre d'outil de l'éditeur. 2. L'éditeur insère automatiquement le texte suivant: ``` | Column 1 | Column 2 | Column 3 | | -------- | -------- | -------- | | Text | Text | Text | ``` C'est un modèle dans lequel vous allez changer les textes `Column 1` par le titre de votre colonne. Modifier aussi `Text` pour le contenu des cellules. Vous pouvez ajouter des lignes. | Colonne 1 | Colonne 2 | Colonne 3 | |:---------:| --------- | --------- | | une | deux | trois | | quatre | 5 | 6 | ### Astuce Créer des tableaux peut s'avérer pénible en markdown. Ce site va considérablement vous simplifiez la tâche: [Générateur de tableau](https://www.tablesgenerator.com/markdown_tables#) ### Insérer des blocs colorés Envie d'un peu de couleurs ? :::info Contenu dans un bloc bleu, pour de l'info. ::: :::danger Contenu dans un bloc rouge, pour signaler un danger. ::: ::: success Contenu vert, tout va bien :smiley: ::: ### Insérer une équation :triangular_ruler: Une équation à insérer dans le texte. Il suffit d'utiliser le caractère `$`. - Le carré de $\sqrt{2}$ est 2. On peut aussi mettre en évidence une équation en la centrant: en utilisant `$$` Par exemple: `$$T=2\pi\sqrt\frac{\ell}{g}$$` va rendre: $$T=2\pi\sqrt\frac{\ell}{g}$$ La syntaxe utilisée nécessite de connaître des rudiments de LaTeX. Il paraît que trente minutes suffisent pour apprendre LaTeX. En tout cas voici une ressource top: [Apprendre LaTeX en anglais](https://www.overleaf.com/learn/latex/Learn_LaTeX_in_30_minutes) ou [Ici en français](https://fr.wikibooks.org/wiki/LaTeX/Écrire_des_mathématiques) ## Exporter vers un autre format Vous souhaitez récupérer un fichier contenant votre texte en cliquant sur Menu  Plusieurs options s'offrent à vous:  1. Vous pouvez télécharger votre fichier en Markdown (c'est à dire un fichier texte brute identique à ce que vous avez écrit dans l'éditeur) 2. Vous pouvez télécharger votre texte au format HTML (si vous voulez l'exploiter ailleurs sur le WEB) 3. Pandoc va vous permettre de convertir votre document vers une multitude d'autres formats: word, openoffice, epub, LaTeX. Pour l'instant il n'y a pas d'export vers pdf. ### Remarques - Pandoc est un formidable couteau suisse de conversion de fichier texte. Il permet de convertir un fichier texte dans un format donné (ici markdown) vers de très nombreux autres formats. Voici le site de référence de [PANDOC](https://pandoc.org/index.html) - Pour obtenir un document au format pdf, il faut exporter au format LaTeX puis compiler le code LaTeX en pdf. Vous trouvez cela compliqué, c'est un peu vrai mais cela vaut la peine. On peut même écrire un mémoire avec la gestion d'une bibliographie entièrement avec markdown puis générer le pdf comme par [Exemple d'un mémoire écris en markdown](https://github.com/deniscyril/caffa/blob/main/memoire_soutenu_sept_2018.pdf) ## Publier le contenu Cliquez sur la zone en haut à droite du rendu de votre texte. Ici sur `Locked` mais cela peut être indiqué autre chose sur votre texte. ---  --- Un menu déroulant apparaît et vous permets de sélectionner le type de droit d'édition que vous allez appliquer à votre document et au lien de partage. Le lien de partage s'obtient en cliquant `Publier`. Votre navigateur ouvre une nouvelle page et charge le document puis l'affiche. Pour récupérer le lien de partage, copier l'adresse située dans la barre d'adresse de votre navigateur. ### Exemple: Le document que vous lisez est en mode `LOCKED` cela signifie que l'auteur que je suis est le seul à pouvoir l'éditer. Je peux néanmoins en partager la contenu afin que d'autres puissent lire ce contenu. Pour cela je clique sur publier et récupère le lien de cette nouvelle page: `https://codimd.apps.education.fr/IOt-e2ZkSTaR9hgB-S2Wxg?both#` Voici le [Lien de partage](https://codimd.apps.education.fr/IOt-e2ZkSTaR9hgB-S2Wxg?both#) un internaute qui possède le lien a accès à ce document et aussi au code markdown de ce document. En revanche, il ne peut pas en modifier le contenu. - Si vous souhaitez collaborer avec plusieurs utilisateurs, vous pouvez placer le document en mode `Limited` ou `Editable` seuls les personnes identifiées peuvent éditer. ## Références Une vidéo pour découvrir et approfondir le format Markdown: [Vidéo](https://youtu.be/6hikjzymd0c) Une autre documentation plus complète est [ICI](https://demo.hedgedoc.org/features?both)