class: center, middle # L'écriture académique au format texte ## Introduction à *Markdown* & *Pandoc* Dr Bernard Pochet, 2023 - CC-BY .center[![](ull.png)] --- .right[![](logo.png)] ## Questionnement - ce que le numérique peut nous offrir ; - ce qu'il a tendance à nous imposer ; - ce dont nous avons besoin. **Il devient indispensable de s'arrêter !** --- .right[![](logo.png)] ## Questionnement - ce que le numérique peut nous offrir ; - ce qu'il a tendance à nous imposer ; - ce dont nous avons besoin. **Il devient indispensable de s'arrêter !** Réflexion alimentée par les principes : - de l'édition numérique ; - de la science ouverte ; - de l'écologie numérique ; - du développement durable ; - de l'ouverture ; - du décloisonnement entre pratiques. --- .right[![](logo.png)] et vous… ## Quel outil utilisez-vous ? - Word - LibreOffice - LaTeX - Autre ? --- .right[![](logo.png)] et vous… ## Quel outil utilisez-vous ? - Word - LibreOffice - LaTeX - Autre ? ## Dans votre utilisation de ce logiciel : - vous êtes une ou un pro ? - toutes les fonctions offertes ne vous posent pas de problèmes - vous perdez parfois du temps pour la mise en page - la rédaction et la mise en page prennent autant de temps - vous pensez qu'un logiciel de traitement de texte est source de distraction lorsque vous rédigez… --- .right[![](logo.png)] ## Science ouverte et low-tech .center[**Une idée sur ce que recouvre ces concepts ?**] --- ![](ComposantesScienceOuverte.png) --- ![](low-tech.png) --- .right[![](logo.png)] ## Ouverture et décloisonnement entre pratiques **Chaîne logicielle que vous choisissez doit répondre à des objectifs :** - de simplification ; - d'ouverture ; - de qualité ; - de durabilité. **Facilite les échanges :** - entre formats ; - entre acteurs. --- .right[![](logo.png)] ## Objectif de cette formation 1. comprendre pourquoi changer ses habitudes pour rédiger, structurer ses idées, produire des documents de qualité ; 1. voir ce qui est possible avec les outils numérique ; 1. apprendre comment les utiliser pour la rédaction et la création de documents professionnels. ## Support de la formation le manuel "Markdown & vous" (https://e-publish.uliege.be/md) --- ![](cata_e.png) --- .right[![](logo.png)] ## Écrire ### **Écrire, rédiger**, c’est bien évidemment respecter un certain nombre de **règles** : - syntaxiques ; - orthographiques ; - lexicales ; - … Mais c’est aussi : - **organiser** et **structurer** ses idées; - **prendre le temps** qu’il faut ; - et **l’organiser**. Il est important, à ce stade, de se poser la question du choix des **formats** et des **outils** --- .right[![](logo.png)] ## Le traitement de texte Traditionnellement et à cause du monopole de son éditeur, c’est le logiciel *Word* qui est majoritairement utilisé pour la rédaction de textes. petit clin d’œil ... ![](docx.png) Des alternatives ? : *LibreOffice*, *Google docs*, ... --- .right[![](logo.png)] ## Le traitement de texte - Le principal objectif était/est de remplacer la **machine à écrire** pour produire des **pages imprimées.** - Le ***WYSIWYG*** (*What You See Is What You Get* = ce que vous voyez à l’écran est ce que vous aurez comme résultat imprimé) est gourmand en ressources informatiques et souvent source de lenteur. - Des programmes complexes avec de multiples fonctions (et menus) dont certaines sont mal, rarement, voire jamais utilisées --- .right[![](logo.png)] ## Le traitement de texte - Le principal objectif était/est de remplacer la **machine à écrire** pour produire des **pages imprimées.** - Le ***WYSIWYG*** (*What You See Is What You Get* = ce que vous voyez à l’écran est ce que vous aurez comme résultat imprimé) est gourmand en ressources informatiques et souvent source de lenteur. - Des programmes complexes avec de multiples fonctions (et menus) dont certaines sont mal, rarement, voire jamais utilisées ## La "numérisation" a profondément transformé les pratiques d'écriture. --- .right[![](logo.png)] ## L'écriture numérique **Nouveaux modes de consultation :** - pages web ; - document pdf ; - ebook (ePub) ; - (document imprimé). **Principes de base :** - séparer l’écriture et la mise en forme ; - exporter son texte dans n’importe quel format ; - faciliter le partage ; - l’éditer avec n’importe quel outil et sur n’importe quelle plateforme (*Windows*, *Mac*, *Linux*…) ; - avoir une garantie de pérennité. --- .right[![](logo.png)] ## L'écriture numérique Doit : - organiser la pensée et permettre d’exprimer cette organisation (par la **structure**) ; - doit respecter des standards ouverts (pour la **diffusion** et le **partage**) ; - doit aussi contenir la description du document (les **métadonnées**). --- .right[![](logo.png)] ## L'écriture numérique Doit : - organiser la pensée et permettre d’exprimer cette organisation (par la **structure**) ; - doit respecter des standards ouverts (pour la **diffusion** et le **partage**) ; - doit aussi contenir la description du document (les **métadonnées**). **Raison pour laquelle il faut séparer le fond et et la forme.** --- .right[![](logo.png)] ## L'écriture numérique Doit : - organiser la pensée et permettre d’exprimer cette organisation (par la **structure**) ; - doit respecter des standards ouverts (pour la **diffusion** et le **partage**) ; - doit aussi contenir la description du document (les **métadonnées**). **Raison pour laquelle il faut séparer le fond et et la forme.** **Il faut :** - remplacer le balisage graphique (**pseudo-structuration esthétique**) produit avec un traitement de texte - par une structure (**sémantique**) stricte, compréhensible par une machine --- .right[![](logo.png)] ## Les formats Les formats d'enregistrement des différents logiciels posent de nombreux problèmes à la fois de lisibilité mais aussi de durabilité. Exemples avec un petit texte… **1. Exemple "fini" (au format pdf)** --- ![](lorem.png) --- .right[![](logo.png)] **2. Exemple au format "traitement de texte (RTF)** extrait : ``` {\rtf1\ansi\deff4\adeflang1025 {\fonttbl{\f0\froman\fprq2\fcharset0 Times New Roman;}{\f1\froman\fprq2\fcharset2 Symbol;} {\f2\fswiss\fprq2\fcharset0 Arial;}{\f3\froman\fprq2\fcharset0 Liberation Serif{\*\falt Times New Roman};}{\f4\fswiss\fprq0\fcharset128 Calibri;}{\f5\fswiss\fprq0\fcharset128 Liberation Sans{\*\falt Arial};}{\f6\fswiss\fprq0\fcharset128 Liberation Serif{\*\falt Times New Roman};}{\f7\fnil\fprq2\fcharset0 Noto Sans CJK SC;}{\f8\fnil\fprq2\fcharset0 0;} {\f9\fnil\fprq2\fcharset0 Liberation Sans{\*\falt Arial};}{\f10\fnil\fprq2\fcharset0 OpenSymbol {\*\falt Arial Unicode MS};}{\f11\fnil\fprq2\fcharset0 Liberation Serif{\*\falt Times New Roman};} {\f12\fnil\fprq2\fcharset0 FreeSans;}} {\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0; \red255\green0 \blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue 128;\red0\green128\blue128;\red0\green128\blue0;\red128\green0\blue128;\red128\green0\blue0;\red 128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;} {\stylesheet{\s0\snext0\ql\widctlpar\hyphpar0\ltrpar\cf1\kerning1\dbch\af8\langfe2052\dbch\af11 \afs24\alang1081\loch\f6\fs24\lang1036 Normal;} {\*\cs15\snext15 Caract\u232\'3fres de note de bas de page;} {\*\cs16\snext16\super Ancre de note de bas de page;} {\*\cs17\snext17\super Ancre de note de fin;} {\*\cs18\snext18 Caract\u232\'3fres de note de fin;} {\*\cs19\snext19\dbch\af10\loch\f6 ListLabel 1;} {\*\cs20\snext20\dbch\af10 ListLabel 2;} {\*\cs21\snext21\dbch\af10 ListLabel 3;} {\*\cs22\snext22\dbch\af10 ListLabel 4;} {\*\cs23\snext23\dbch\af10 ListLabel 5;} {\*\cs24\snext24\dbch\af10 ListLabel 6;} {\*\cs25\snext25\dbch\af10 ListLabel 7;} {\*\cs26\snext26\dbch\af10 ListLabel 8;} {\*\cs27\snext27\dbch\af10 ListLabel 9;} {\s28\sbasedon0\snext29\ql\widctlpar\hyphpar0\sb240\sa120\keepn\ltrpar\cf1\kerning1\dbch\af7 \langfe2052\dbch\af9\afs28\alang1081\loch\f5\fs28\lang1036 Titre;} {\s29\sbasedon0\snext29\sl276\slmult1\ql\widctlpar\hyphpar0\sb0\sa140\ltrpar\cf1\kerning1\dbch \af8\langfe2052\dbch\af11\afs24\alang1081\loch\f6\fs24\lang1036 Corps de texte;} {\s30\sbasedon29\snext30\sl276\slmult1\ql\widctlpar\hyphpar0\sb0\sa140\ltrpar\cf1\kerning1 \dbch\af8\langfe2052\dbch\af12\afs24\alang1081\loch\f6\fs24\lang1036 Liste;} {\s31\sbasedon0\snext31\ql\widctlpar\hyphpar0\sb120\sa120\ltrpar\cf1\i\kerning1\dbch\af8 \langfe2052\dbch\af12\afs24\alang1081\ai\loch\f6\fs24\lang1036 L\u233\'3fgende;} {\s32\sbasedon0\snext32\ql\widctlpar\hyphpar0\ltrpar\cf1\kerning1\dbch\af8\langfe2052\dbch \af12\afs24\alang1081\loch\f6\fs24\lang1036 Index;} ``` --- .right[![](logo.png)] **3. Exemple au format Web (HTML)** Pseudo structure (titre niveau 1 en gras et dans une taille plus grande) ```
Titre niveau 1
Titre niveau 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est urna, sodales vitae maximus et, feugiat vel ipsum.
Proin ut pulvinar turpis. Aliquam nec purus arcu. Cras accumsan imperdiet finibus.
Etiam at velit bibendum, suscipit quam in, porttitor ligula.
Aliquam nunc nunc, commodo sed sapien non, ornare volutpat ex. Mauris sed dui et augue tincidunt tempor ac pulvinar massa. Cras vulputate elit a molestie tincidunt. Sed vitae fringilla elit, sed facilisis ipsum. Duis semper sapien quam, a interdum purus posuere eget. Quisque hendrerit, massa sit amet interdum porttitor, elit lacus tempor sapien, ut sagittis sapien eros nec sem. Curabitur convallis interdum turpis.
Titre niveau 2
Aliquam quis auctor nisi. In consequat mattis erat, ut luctus felis. Sed convallis turpis lorem, in placerat eros mattis at. Vestibulum varius commodo turpis in placerat. Cras id odio lectus. Donec facilisis magna ac lacus placerat, eu posuere neque aliquet. In ut auctor tortor, sit amet placerat magna. Liste :
Pellentesque cursus urna id risus faucibus volutpat ;
Sed quis tellus turpis. Nullam tempor, nibh id venenatis bibendum, ante ipsum ultrices nunc, ac lobortis libero leo consectetur libero ;
Curabitur ut dictum ipsum.
``` --- .right[![](logo.png)] **4. Exemple au format *Markdown*** ``` # Titre niveau 1 ## Titre niveau 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est urna, sodales vitae maximus et, feugiat vel ipsum. *Proin ut pulvinar turpis. Cras accumsan imperdiet finibus.* **Etiam at velit bibendum, suscipit quam in, porttitor ligula.** Aliquam nunc nunc, commodo sed sapien non, ornare volutpat ex. Mauris sed dui et augue tincidunt tempor ac pulvinar massa. Cras vulputate elit a molestie interdum turpis. ## Titre niveau 2 Aliquam quis auctor nisi. In consequat mattis erat, ut luctus felis. Sed convallis. In ut auctor tortor, sit amet placerat magna. Liste : - Pellentesque cursus urna id risus faucibus volutpat ; - Sed quis tellus turpis. Nullam tempor, nibh id venenatis bibendum, ante ipsum ultrices nunc, ac lobortis libero leo consectetur libero ; - Curabitur ut dictum ipsum. ``` --- .right[![](logo.png)] ## Taille des fichiers ![](fichiers.png) (les deux premiers, .md et .html, sont des fichiers au format "texte") --- .right[![](logo.png)] ## Le format texte Fichiers lisibles avec un simple éditeur (traditionnellement fichiers .txt) **1. Pas de balisage** : pour prendre des notes **2. Balisage léger** : ne perturbe que peu la lecture mais permet de formater le texte ![](formats.png) **3. Balisage plus lourd et plus complexe** (pour mémoire) : XML --- .right[![](logo.png)] ## Le format texte Le format texte, avec balisage léger, en plus d'être facilement lisible, permet : - de **séparer** l’écriture et la mise en forme (premier principe déjà évoqué) ; - d'exporter son texte dans n’importe quel **format** (avec *Pandoc* par exemple) ; - de faciliter le **partage** ; - de l’éditer avec n’importe quel **outil** et sur n’importe quelle **plateforme** (*Windows, Mac, Linux…*) ; - d'avoir une garantie de **pérennité** ; - de travailler **hors ligne**. Avec le format texte on peut aussi envisager une orientation ***WYSIWYM*** (*What You See Is What You Mind*). --- .right[![](logo.png)] ## Traitement de texte vs éditeur ? ![](simplicite.png) ... ;-) --- .right[![](logo.png)] ### *LaTeX* - résout le problème du codage et de la structure - sépare le fond et la forme - donne le contrôle total sur le texte - se charge de la mise en page finale en fonction des instructions ... il est cependant difficile à maîtriser ![](latex.png) --- .right[![](logo.png)] ### Écriture *distraction free* Point de départ : l'écriture avec une feuille papier et un crayon, sans distraction (*LaTeX*, avec son codage particulier, n'est pas un modèle d'écriture sans distraction). --- .right[![](logo.png)] ### Écriture *distraction free* Point de départ : l'écriture avec une feuille papier et un crayon, sans distraction (*LaTeX*, avec son codage particulier, n'est pas un modèle d'écriture sans distraction). #### Solution = utilisation du format *Markdown* - langage de balisage léger, simple : - à lire, - à écrire, - à mémoriser (7') ; - utilisable avec n'importe quel logiciel d’édition (spécialisé ou non) - permet de se concentrer sur la rédaction sans se préoccuper de la mise en page finale du document --- .right[![](logo.png)] ### *Markdown* #### Historique - co-créé par Aaron Swartz et John Gruber en 2004 - pour générer facilement du code HTML pour le web - a été étendu pour être utilisé pour produire d'autres types de documents dont le *pdf* (dans ce cours = variante *Pandoc* de *Markdown* qui utilise *LaTeX* pour produire les documents) --- .right[![](logo.png)] ### *Markdown* #### Principes : - *Single Source publishing* : avec un (ou plusieurs) même(s) fichier(s) source(s) ont peut produire des documents dans différents formats (essentiellement *HTML*, *ePub*, *pdf*, *docx*, *odt*, *tex* ...) ; - proposer une méthode simple, ouverte et durable pour rédiger et produire de beaux documents ; - simplicité mais : nombreuses fonctions proposées par les traitements de texte impossibles à reproduire (le fait qu'elles existent n'en fait d'ailleurs pas des fonctions indispensables) ; - séparer le fond de la forme. --- .right[![](logo.png)] ## le fond #### Le texte, une suite de caractères, qui se lit en dehors de toute mise en forme. ## la forme #### La traduction graphique, enrichie, du texte. #### Elle peut être différente d'un support à l'autre. --- .right[![](logo.png)] ## Pratiquement Il faut créer un **fichier texte** (traditionnellement, un fichier avec l'extension .txt) : - avec n'importe quel éditeur ; - l'enregistrer avec l'extension ".md". --- .right[![](logo.png)] ## Pratiquement Il faut créer un **fichier texte** (traditionnellement, un fichier avec l'extension .txt) : - avec n'importe quel éditeur ; - l'enregistrer avec l'extension ".md". ## Autour du texte, cinq éléments à prendre en compte : 1. la **structure** du document (parties, chapitres, titres et paragraphes) ; 1. la **mise en forme du texte** (gras, italique...) ; 1. les **compléments** du texte (notes, liens, figures, tableaux et citations) ; 1. les éléments de **mise en forme du document** (marges, taille des caractères, numérotation des titres…) ; 1. la **description du document** (les métadonnées). --- .right[![](logo.png)] ## La structure du document ### Les titres ``` # Titre de niveau 1 ## Titre de niveau 2 ### Titre de niveau 3 #### Titre de niveau 4 ##### Titre de niveau 5 ###### Titre de niveau 6 ``` Ils peuvent être numérotés automatiquement (instruction de mise en forme) --- .right[![](logo.png)] ## La structure du document ### Les paragraphes Dans le texte, la séparation en paragraphes est réalisée par un double saut de ligne. ### Les listes - listes simples ; - listes numérotées ; - combinaison des deux ; - cases à cocher (*to do*). --- .right[![](logo.png)] ## Exemples 1 : ***ceci :*** ``` - item 1 - item 2 + item 3 ``` ***donne :*** ![](liste.png) --- .right[![](logo.png)] ## Exemple 2 : ***Ceci :*** ``` 1. item 1 1. item 2 1. item 3 ``` ***donne :*** 1. item 1 1. item 2 1. item 3 --- .right[![](logo.png)] ## La mise en forme du texte **Les styles** Les fonctions de base sont l'*italique* et le **gras**. Il est aussi possible de ~~barrer~~ un texte. ***Ce passage :*** ``` *Ceci est un texte italique*, **Ceci est un texte gras** et ~~Ceci est un texte barré~~ ``` ***Donnera :*** *Ceci est un texte italique*, **Ceci est un texte gras** et ~~Ceci est un texte barré~~ Les indices et les exposants sont réalisés avec ~ et ^ donc : H~2~O et X^2^ Les tirets longs (cadratin) et demi-long (demi-cadratin) sont créés avec 3 et 2 tirets (le signe moins) : -- et --- --- .right[![](logo.png)] ## La mise en forme du texte **Les mises en évidence (citation)** ***Ce passage :*** ``` > "But here’s the most important bit, saved for last: none of this matters if you want to write a book. Quite a few people have told me that they want to write a book, but they’re not sure about which tools to use. My advice: all you need to write a book is a program that allows you to write text into a file [@ball2018]." ``` ***Donnera :*** > "But here’s the most important bit, saved for last: none of this matters if you want to write a book. Quite a few people have told me that they want to write a book, but they’re not sure about which tools to use. My advice: all you need to write a book is a program that allows you to write text into a file (Ball, 2018)." --- .right[![](logo.png)] ## La mise en forme du texte **Les codes et textes non formatés** Pour afficher du code sans formatage (comme fait à plusieurs reprises plus haut), il faut : - soit encadrer le texte (ligne précédente et ligne suivante) avec trois accents graves consécutifs ; - soit, pour une seule ligne par exemple, faire précéder le texte par une tabulation ou au moins trois espaces. **Autres codes utiles pour la mise en forme** - l'utilisation de commandes *LaTeX* ou de codes html pour améliorer le rendu ; - l'insertion d'une ligne horizontale : "\*\*\*" ou "---" ; - les espaces insécables (pour insérer une ligne vide ou empêcher le positionnement en début de ligne de "?", ":" ou ";") : "& nbsp ;" ; - l'échappement avec "\\" pour afficher des caractères (comme \[ ou \#) qui sont interprétés ; - … (voir le manuel). --- .right[![](logo.png)] ## Les compléments du texte **Les notes de bas de page** Les notes sont créées avec l'ajout d'un "^" et le texte de la note est encadré de "\[" et "\]" : ``` ceci est le texte^[Et ceci est la note.]. ``` Les notes sont numérotées automatiquement et placées en bas de page. --- .right[![](logo.png)] ## Les compléments du texte **Les liens** Pour créer un lien vers une page Web, il faut utiliser la séquence \[ \](). Entre les crochets, on va placer le texte à afficher et, entre les parenthèses, l'URL cible : [texte à afficher](https://url_cible.org) Il est aussi possible de créer des liens à l'intérieur d'un document (via une ancre : \{\#ancre\}). --- .right[![](logo.png)] ## Les compléments du texte **Les figures** ***Ceci :*** ``` ![Le logo de *Markdown*](markdown.png) ``` ***Donnera :*** ![Le logo de *Markdown*](markdown.png) figure 1 : Le logo de *Markdown* --- .right[![](logo.png)] ## Les compléments du texte **Les figures** 1. lors de la transformation, *Pandoc* va parfois déplacer du texte pour un remplissage idéal des pages ; 1. s'il n'y a pas de légende (texte entre le \[ et \]), la figure sera alignée à gauche et la mise en forme sera peut-être moins optimale ; 1. il est possible de modifier la taille de l'image en ajoutant \{ width=50% \} derrière l'appel d'image. --- .right[![](logo.png)] ## Les compléments du texte **Les tableaux** ``` | **gauche** | **centre** | **droite** | |:-------------|:------------:|-------------:| | cellule 1.1 | cellule 2.1 | cellule 3.1 | | cellule 1.2 | cellule 2.2 | cellule 3.2 | : Titre du tableau ``` ***Donnera :*** ![](tableau.png) --- .right[![](logo.png)] ## Les compléments du texte **Les équations mathématiques** Utilisation de la syntaxe *TeX Math* de *LaTeX*. ***La séquence suivante :*** ``` $$x = \frac {-b \pm \sqrt{b^2 - 4ac}}{2a}$$ ``` ***donnera :*** ![](formules.png) --- .right[![](logo.png)] ## Les compléments du texte **Les citations et la bibliographie** 1. deux fichiers doivent être présents dans le même répertoire que le document .md : - un **fichier BibTex** créé avec un gestionnaire bibliographique, - un **fichier csl** (*Citation Stype Langugage*) de style bibliographique, 2. ces fichiers doivent renseignés dans l'entête YAML ; 3. insérer les citations : - soit avec l'appel \[@auteur2000\] pour une citation avec des parenthèses : "texte texte texte (Auteur, 2000)", - soit avec l'appel @auteur2000 pour une citation directe : "texte texte texte Auteur (2000)", 4. ajouter le titre "Bibliographie" en fin de document ; 5. ajouter "--citeproc" dans la commande *pandoc* : pandoc --citeproc source.md -o destination.pdf. --- .right[![](logo.png)] ### L'entête YAML *Pandoc* prend en charge les entêtes YAML pour les fichiers *Markdown*. Elle se situe au début du fichier et est encadrée de trois tirets au début et à la fin. Cette partie comprend une série de variables qui : 1. donnent des instructions pour la **mise en forme** du document (ici *pdf*) 1. contiennent les **métadonnées** (la description) du fichier *Markdown*. note : l'acronyme YAML n’est pas simple à traduire, il vient de *YAML Ain’t Markup Language* telle que le définit le site yaml.org --- .right[![](logo.png)] ### L'entête YAML ``` --- documentclass: article header-includes: - \usepackage[french]{babel} - \usepackage[utf8]{inputenc} - \usepackage[a4paper, top=2.5cm, bottom=2.5cm, left=2.5cm, right=2.5cm]{geometry} title: Titre du document subtitle: Sous-titre du document author: Non, Prénom Affiliation: ULiège date: 2021 (cc-by) abstract: Ce court document est destiné à démontrer les possibilités de *Markdown* ... keywords: Markdown, rédiger subject: écriture numérique ouverte Modified: 9 décembre 2021 right: CC-BY 0.4 fontsize: 11pt toc: false toc_depth: numbersections: false bibliography: library.bib csl: apa.csl links-as-notes: true linkcolor: blue --- ``` --- .right[![](logo.png)] ### YAML : instructions de mise en forme - **documentclass:** avec *book* ou *report* ou *article* (et également *chapter* ou *part*). La mise en forme sera différente pour ces différents types ; - **header-includes:** une série de commandes directes *LaTeX* indispensables (entre autres) pour franciser la mise en forme (par exemple : "Table des matières" au lieu de "Contents" ou des tirets longs au lieu de bulets dans les listes) et formater la page (on peut aussi ajouter "*landscape*" après "a4paper" pour avoir la page en "paysage" au lieu de "portrait" ; - **fontsize:** la taille des caractères = 10, 11 ou 12pt (il est possible d'avoir d'autres tailles, 8, 9, 14, 17 ou 20pt, après avoir remplacé *article* par *extarticle* dans "documentclass") ; - **toc:** true/false (crée une table des matières en début du document. On peut aussi utiliser lof: et lot: pour les tables de figures et de tableaux) ; - **toc_depth:** de 1 à x (précise la profondeur de cette table des matières) ; - **numbersections:** true/false (pour numéroter automatiquement les titres) ; - **bibliography:** library.bib (le nom du fichier *bibtex* créé, par exemple, avec *Zotero*) ; - **csl:** apa.csl (le style bibliographique) ; - **links-as-notes:** true/false (créer des notes de bas de page pour tous les liens) ; - **linkcolor:** blue (pour définir la couleur des liens). (voir le manuel pour toutes les autres possibilités) --- .right[![](logo.png)] ### YAML : métadonnées Pour faciliter le partage et la diffusion d'un document numérique, celui-ci doit contenir sa propre description. On parle de métadonnées. La structure de ces métadonnées fait l’objet de normes. Les éléments les plus utilisés sont : - **title:** - **subtitle:** - **author:** - **date:** - **abstract:** - Affiliation: - keywords: - subject: - project: - modified: - right: --- .right[![](logo.png)] ## ... en résumé ![](synthese1.png) --- .right[![](logo.png)] ### Les outils/logiciels nécessaires On a besoin d'un logiciel pour **éditer** le fichier *Markdown* et d'un logiciel pour **transformer** ce fichier au format de sortie : html, pdf, epub, odt, docx, tex... Pour éditer le fichier *Markdown* on peut utiliser trois types d'outils : 1. un simple **éditeur de texte** comme *Bloc-notes* (*Windows*), *TextEdit* (*Mac*) ou *Gedit* (*Linux*) --- pour rappel, un fichier .md est un simple fichier texte ; 1. un **éditeur orienté** *Markdown* ; 1. un **service en ligne** (via un navigateur Web) également orienté *Markdown*. Dans le processus décrit dans cette formation, c'est le logiciel *Pandoc* qui est utilisé pour réaliser la transformation. Dans tous les cas, *Pandoc* et *LaTeX* doivent êtres installés sur l'ordinateur (*Windows*, *Mac* ou *Linux*). --- .right[![](logo.png)] ### Les éditeurs *Markdown* - [*Typora*](https://typora.io) - [*MarkText*](https://github.com/marktext/marktext/releases) - [*Zettlr*](https://www.zettlr.com/) - [*Apostrophe*](https://world.pages.gitlab.gnome.org/apostrophe/) (réservé aux linuxiens ... ;-) - ... Ces éditeurs spécialisés intègrent aussi l'étape de transformation. (voir [*Alernative To*](https://alternativeto.net/software/markdown/) pour une liste l'ensemble des logiciels d'édition *Markdown*) --- .right[![](logo.png)] ### Les éditeurs *Markdown* : *Gedit* ![](gedit.png) --- .right[![](logo.png)] ### Les éditeurs *Markdown* : *Typora* ![](typora.png) --- .right[![](logo.png)] ### Les éditeurs *Markdown* : *Zettlr* ![](zettlr.png) --- .right[![](logo.png)] ### Les éditeurs *Markdown* : *Apostrophe* ![](apostrophe.png) --- .right[![](logo.png)] ### Outils en ligne Utilisé via un navigateur, leur nombre augmente constamment : - [*markup.rock*](https://markup.rocks/) - [*FocusFox*](https://www.focusfox.co/) - [*Dillinger*](https://dillinger.io/) - [*Stack Edit*](https://stackedit.io) - [*Stylo*](https://stylo.huma-num.fr/) - ... --- .right[![](logo.png)] ### Outils en ligne : *Markup/rock* ![](markup.png) --- .right[![](logo.png)] ### Outils en ligne : *Stylo* ![](stylo.png) --- .right[![](logo.png)] ### Outils de transformation Basiquement, l'utilisation de *Pandoc* passe par le *mode ligne* ("Terminal" sur une machine *Linux* ou *Mac*. Pour *Windows* il faut entrer "cmd" dans la zone de recherche). La commande sera la suivante : ![](ligne.png){ width=40% } Les outils spécialisé (*Typora*, *MarkText*, *Zettlr*, *Apostrophe*, ...) intègrent un mode de transformation qui n'oblige pas le passage par le mode ligne. On peut aussi tester la transformation directement sur le site *Pandoc*. --- .right[![](logo.png)] ## Exercice pratique 1 1. Ouvrez votre navigateur et allez à l'adresse : **markup.rocks** ; 1. videz l'écran de gauche ; 1. commencez à écrire et créez : - un titre de niveau 1, - un titre de niveau 2, - une liste normale, - une liste numérotée, - des mots en italique et des mots en gras, - un texte sous la forme de citation, - un tableau avec 3 lignes et 3 colonnes. (vous vous aidez du manuel "Markdown & vous" : https://e-publish.uliege.be/md) --- .right[![](logo.png)] ## Exercice pratique 2 1. **créez un répertoire** "md" sur votre poste de travail (à la racine "c:/" ou dans "/Documents") ; 1. **télécharger** le fichier **https://infolit.be/docs/exemple.zip** ; 1. **décompressez** le fichier (vous devriez avoir 4 fichiers) dans le répertoire "md" ; 1. ouvrez le fichier "exemple.md" avec ***notepad*** pour voir le contenu et éventuellement le modifier ; 1. ouvrez le **mode terminal** sur votre poste : entrer "cmd" dans la zone de recherche ; 1. **déplacez vous** dans le répertoire "md" qui contient les 4 fichiers avec les commandes "cd" (pour *change directory*) et "dir" pour voir où vous êtes ; 1. entrez la commande **pandoc --citeproc exemple.md -o exemple.pdf** (attention : Pandoc et LaTeX doivent être installés sur votre ordinateur) ; 1. testez la même commande en remplaçant "**pdf**" par "**docx**" ou "**odt**" ; 1. retournez en mode "*windows*" et **ouvrez les fichiers créés** avec "Pandoc". Il est aussi possible de tester *Pandoc* sans l'installer à l'adresses https://pandoc.org/demos.html (mais pas de transformation .md vers .pdf) --- .right[![](logo.png)] ## Petite note finale : - Vous pouvez utiliser cette "technologie" pour tous vos écrits (thèse, rapport, article, note…); - pous pouvez aussi l'utiliser pour remplacer *Power Point* (plusieurs méthodes dont celle utilisée pour ces slides) ; - vous pouvez l'utiliser pour rédiger vos mails (plugin dans *Thunderbird*) - … et pour bien d'autres choses. --- .right[![](logo.png)] ## Ce que vous retenez de cette formation ? --- .right[![](logo.png)] ## Ce que vous retenez de cette formation ? ## Ce qui vous a le plus intéressé ? --- .right[![](logo.png)] ## Ce que vous retenez de cette formation ? ## Ce qui vous a le plus intéressé ? ## Ce que vous souhaitez que je réexplique ? --- .right[![](logo.png)] ## Ce que vous retenez de cette formation ? ## Ce qui vous a le plus intéressé ? ## Ce que vous souhaitez que je réexplique ? ## Allez-vous utiliser *Markdown* à l'avenir ? --- .right[![](logo.png)] .center[**Ces slides ont (bien évidemment) été rédigés en *Markdown* dans un fichier .html avec la technologie remark.js (javascript)**] .center[(pressez ctrl-u pour voir le code source)] .center[**Merci pour votre participation !**]