# 📝 Markdown <!-- Put the link to this slide here so people can follow --> <img src ="https://go.epfl.ch/markdown-logo-presalex" width="400px" /> ##### Présentateur: https://people.epfl.ch/alexandre.javet ###### *Cette présentation a été faite en markdown sur hackmd.io :)* <img src="https://go.epfl.ch/qrcode-markdown-presalex" height="80px" /> --- ## 📖 Sommaire ---- 1. **Qu'est ce qu'est MarkDown ?** 1.1. **Exemple d'un texte markdown** 3. **Où l'utilise-t-on ?** 4. **Pourquoi l'utilise-t-on ?** 5. **Syntaxe principale** 6. **Pandoc** --- ### ❓ keskecé ? ```graphviz digraph markdown { nodesep=0.5 // increases the separation between nodes node [color=Black,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Grey, style=dashed] //All the lines look like this Markdown->{"Lightweight (LML)"} "Lightweight (LML)"->{"Made for plain text" "Easy to read"} "Easy to read"->{"Raw Form lisible"} "Made for plain text"->{Notepad Atom "And more..."} {rank=same;} // Put them on the same level } ``` ###### *LML*: Lightweight Markup Language ---- ### Exemple d'un texte #### **Syntaxe** ```markdown= # Je suis un titre 1. Point de liste 1 1. Point de liste 2 `---` ## Je suis un sous titre Je suis en **gras** et je suis en *italique*. ``` ---- #### **Résultat** # Je suis un titre 1. Point de liste 1 1. Point de liste 2 `---` ## Je suis un sous titre Je suis en **gras** et je suis en *italique*. --- ### 📊 Où est-il utilisé ? Markdown est utilisé principalement dans les **readme** d'applications, souvent sur des **repositories**. #### Exemples: - Github - Gitlab - Bitbucket - etc... ---- La syntaxe de markdown est également intégrée dans d'autres types d'application, type communication : - Discord - Slack - Telegram - etc... ---- ### Exemple d'un readme  --- ### ❓ Pourquoi l'utilise-t-on ? * Facile d'utilisation * Intégration de blocks de code * Intégration de graphs, comme UML * Facile à lire * Gratuit, sans license * et plein d'autre raisons ! --- ### Syntaxe principale Titres ```markdown= # Grand titre ## Titre 2 ### Titre 3 #### Titre 4 ... ###### Titre 6 ``` ---- Listes ```markdown= Nombres 1. abc 1. abc Points * abc * abc ``` ---- Texte ```markdown= *italique* **gras** ~~Barré~~ etc... ``` ---- Blocs de code ```markdown= ```javascript console.log("hello world") ``` ``` ```javascript= console.log("hello world") ``` --- ### Pandoc Pandoc est un outil de **conversion** de language de textes et de format de **document textes**. Il est donc utile en markdown. ### Exemple : ```graphviz digraph markdown { nodesep=0.2 // increases the separation between nodes node [color=Black,fontname=Courier,shape=oval] //All nodes will this shape and colour edge [color=Grey, style=dashed] //All the lines look like this ".md"->{"pandoc"} ".pdf"->{"pandoc"} ".html"->{"pandoc"} "pandoc"->{".html" ".pdf" ".md"} {rank=same;".html" ".pdf"} // Put them on the same level } ``` ---- ### Installation Dans un terminal bash : ###### Linux (Ubuntu) ```bash= sudo apt-get install -y pandoc ``` ###### OSX ```bash= brew install pandoc ``` ---- ### Utilisation En écrit pur ```bash= pandoc -f markdown -t html ``` Tapez du markdown, faites <kbd>CTRL</kbd>+<kbd>D</kbd> et votre texte sera converti ---- Conversion d'un fichier ```bash= pandoc test1.md -s -o test1.pdf ``` --- # 🙋‍♀️ Questions ? ##### Liens - https://pandoc.org - https://www.makeuseof.com/why-is-markdown-popular-reasons-you-should-use-it/ - https://en.wikipedia.org/wiki/Markdown