Bienvenu dans le futur
La documentation en Markdown
420-C13-IN | Automne 2021 | Godefroy Borduas 1
En quoi consiste le cours sur
Markdown ?
Utilité de Markdown
Étude de la syntaxe de Markdown
Générer un PDF avec Markdown PDF
420-C13-IN | Automne 2021 | Godefroy Borduas 2
Utilité de Markdown
420-C13-IN | Automne 2021 | Godefroy Borduas 3
Qu'est-ce que Markdown ?
Langage de balisage dédié à la mise en forme de texte
Chaque symbole a un impact sur la mise en forme finale
Multiplateforme et open source
Vous pouvez l'utiliser partout où vous le souhaitez
Nécessite seulement l'installation d'outils (ou bibliothèque)
dédiés
420-C13-IN | Automne 2021 | Godefroy Borduas 4
Permets d'écrire des notes de cours
420-C13-IN | Automne 2021 | Godefroy Borduas 5
Permets d'écrire
des énoncés de
devoir
420-C13-IN | Automne 2021 | Godefroy Borduas 6
Permets d'écrire de
la documentation
420-C13-IN | Automne 2021 | Godefroy Borduas 7
Installation des outils pour Visual Studio
Code
Installer Visual Studio Code
Déjà disponible sur vos postes
Éditeur open source de Microsoft
Multiplateforme et extensible
Permets d'éditer des documents textes à l'origine
Les extensions ajoutent des fonctionnalités
420-C13-IN | Automne 2021 | Godefroy Borduas 8
Extention
Markdown PDF
Permets d'exporter le
document markdown en
PDF
1. Ouvrez le menu d'extension
2. Rechercher markdown pdf
3. Appuyer sur Install
Attendez et utilisez
420-C13-IN | Automne 2021 | Godefroy Borduas 9
Extension marp
Permets de créer et
d'exporter des
présentations en markdown
1. Ouvrez le menu d'extension
2. Rechercher marp
3. Appuyer sur Install
Attendez et utilisez
420-C13-IN | Automne 2021 | Godefroy Borduas 10
Étude de la syntaxe de Markdown
420-C13-IN | Automne 2021 | Godefroy Borduas 11
Les différentes syntaxes Markdown
Markdown est défini avec une syntaxe de base
Certaines entreprises créent une extension au langage
GitHub (guides.github.com)
GitLab (docs.gitlab.com)
CommonMark (https://commonmark.org/)
Etc.
Nous nous concentrerons sur la syntaxe de base
420-C13-IN | Automne 2021 | Godefroy Borduas 12
La syntaxe de base
Texte en gras et en italique
Il suffit d'utiliser le symbole *
Il doit entourer le texte
Aucun espace avant le premier mot (ou expression)
Aucun espace après le deuxième mot (ou expression)
Un mot (ou expression) en italique doit précédé d'un seul *
Un mot (ou expression) en gras doit précédé de deux *
Un mot (ou expression) en gras et italique doit précéder de 3 *
420-C13-IN | Automne 2021 | Godefroy Borduas 13
Exemple
*texte en italique* => texte en italique
**texte en gras** => texte en gras
***texte en gras et en italique*** => texte en gras et en
italique
* n'est pas en italique* => * n'est pas en italique*
**n'est pas en gras ** => **n'est pas en gras **
420-C13-IN | Automne 2021 | Godefroy Borduas 14
La syntaxe de base
Texte barré
Il suffit d'entourer le mot (ou l'expression) entre deux ~
Comme pour le texte en italique, il ne doit pas y avoir d'espace
avant ou après les tildes
~~ceci est barré~~ => ceci est barré
~~ ceci n'est pas barré ~~ => ~~ ceci n'est pas barré ~~
420-C13-IN | Automne 2021 | Godefroy Borduas 15
La syntaxe de base
Les titres
Les titres sont toujours précédés par le symbole #
Le nombre de dièses détermine le niveau du titre
Il y a toujours un espace après le ou les dièses
Il y a au maximum 6 niveaux
420-C13-IN | Automne 2021 | Godefroy Borduas 16
Exemple
Le code suivant génère les titres à la diapositive suivante :
# Titre 1
## Titre 2
### Titre 3
#### Titre 4
##### Titre 5
###### Titre 6
420-C13-IN | Automne 2021 | Godefroy Borduas 17
Titre 1
Titre 2
Titre 3
Titre 4
Titre 5
Titre 6
420-C13-IN | Automne 2021 | Godefroy Borduas 18
La syntaxe de base
Les paragraphes
Les paragraphes ne sont précédés par aucun symbole.
Exemple, le code suivant donne le résultat suivant :
Le Guide galactique est une référence littéraire de l'absurde.
Le Guide galactique est une référence littéraire de l'absurde.
420-C13-IN | Automne 2021 | Godefroy Borduas 19
La syntaxe de base
Les citations
Pour appliquer un style de citation, chaque ligne doit être précédée
par le symbole >
Il n'y a pas d'espace après le symbole > .
420-C13-IN | Automne 2021 | Godefroy Borduas 20
Exemple : Code markdown
>D'après une théorie, le jour où quelqu'un découvrira exactement à quoi sert l'Univers et pourquoi
>il est là, ledit Univers disparaîtra sur-le-champ pour se voir remplacé par quelque chose de
>considérablement plus inexplicable et bizarre. Selon une autre théorie, la chose se serait en fait
>déjà produite.
Le Guide du voyageur galactique (1979), Douglas Adams (trad. Jean Bonnefoy),
éd. Gallimard, coll. « Folio SF », 2005 (ISBN 2-07-031901-6), p. 71-72
Dans cet exemple, les lignes ont été coupées par des sauts de ligne
pour faciliter la lecture. Toutefois, le code à la diapositive suivante
n'applique pas cette coupure.
420-C13-IN | Automne 2021 | Godefroy Borduas 21
Exemple : résultat
“ D'après une théorie, le jour où quelqu'un découvrira exactement
à quoi sert l'Univers et pourquoi il est là, ledit Univers disparaîtra
sur-le-champ pour se voir remplacé par quelque chose de
considérablement plus inexplicable et bizarre. Selon une autre
théorie, la chose se serait en fait déjà produite.
“
Le Guide du voyageur galactique (1979), Douglas Adams (trad. Jean
Bonnefoy), éd. Gallimard, coll. « Folio SF », 2005 (ISBN 2-07-031901-
6), p. 71-72
420-C13-IN | Automne 2021 | Godefroy Borduas 22
La syntaxe de base
Les listes
Il existe deux types de liste : numérotée et à puce
Les listes à puce sont décrites item par item.
Chaque item est précédé par l'un des symboles suivants : * , -
Il doit y avoir un espace après le symbole et avant le texte
Il doit y avoir un espace avant et après le paragraphe de la liste.
420-C13-IN | Automne 2021 | Godefroy Borduas 23
Exemple : liste à puce avec *
Ceci est un paragraphe suivi d'une liste.
* Item 1
* Item 2
Ceci est un autre paragraphe
Ceci est un paragraphe suivi d'une liste.
Item 1
Item 2
Ceci est
420-C13-IN un autre
| Automne 2021 |paragraphe
Godefroy Borduas 24
Exemple : liste à puce avec -
Ceci est un paragraphe suivi d'une liste.
- Item 1
- Item 2
Ceci est un autre paragraphe
Ceci est un paragraphe suivi d'une liste.
Item 1
Item 2
Ceci est
420-C13-IN un autre
| Automne 2021 |paragraphe
Godefroy Borduas 25
Les listes numérotées
Les listes à puce sont décrites item par item.
Chaque item est précédé par un chiffre suivi d'un point
Il doit y avoir un espace après le symbole et avant le texte
Il doit y avoir un espace avant et après le paragraphe de la liste.
420-C13-IN | Automne 2021 | Godefroy Borduas 26
Exemple : liste numérotée
Ceci est un paragraphe suivi d'une liste.
1. Item 1
2. Item 2
Ceci est un autre paragraphe
Ceci est un paragraphe suivi d'une liste.
1. Item 1
2. Item 2
Ceci est
420-C13-IN un autre
| Automne 2021 |paragraphe
Godefroy Borduas 27
La syntaxe de base
Avoir des exemples de code
Markdown est dédié à la documentation de programmation avant
tout
Il est possible d'avoir du texte sans mise en forme qui permet
d'afficher facilement du code de programmation
Pour du code en ligne, on encadre notre code par le symbole `
Pour l'avoir sur plusieurs lignes, on utilise ``` avant et après le code
420-C13-IN | Automne 2021 | Godefroy Borduas 28
Exemple
Code en ligne #include <iostream>
Code multiligne
int main(void) {
cout << "Hello World";
}
420-C13-IN | Automne 2021 | Godefroy Borduas 29
La syntaxe de base
Les tableaux
Chaque ligne est séparée par un saut de ligne
Chaque colonne est séparée par une barre verticale |
L'en-tête du tableau est séparé par les cellules |---|
Chaque ligne doit avoir autant de cellules que les autres lignes.
420-C13-IN | Automne 2021 | Godefroy Borduas 30
Exemple
|cellule 1|cellule 2|
|--------|--------|
| A | B |
| C | D |
cellule 1 cellule 2
A B
C D
420-C13-IN | Automne 2021 | Godefroy Borduas 31
Ajouter des images
Il suffit d'avoir l'hyperlien de l'image
Pour une image locale, c'est le chemin de l'image
Pour une image sur le web, c'est l'URL
La syntaxe : 
Exemple :
Exemple à la diapositive suivante
420-C13-IN | Automne 2021 | Godefroy Borduas 32
420-C13-IN | Automne 2021 | Godefroy Borduas 33
Hyperlien
La syntaxe est similaire à l'image : [Texte à afficher](lien)
Exemple : [Cégep du Vieux Montréal](cvm.qc.ca)
Cégep du Vieux Montréal
Il est possible d'ajouter des liens vers les titres du document.
Le titre est précédé d'un # dans le lien
Effacer tous les accents
Remplacer les espaces par des tirets
[Section les tableaux](#les-tableaux) => Section les tableaux
420-C13-IN | Automne 2021 | Godefroy Borduas 34
Générer un PDF avec Markdown PDF
420-C13-IN | Automne 2021 | Godefroy Borduas 35
1. Ouvrez le menu d'action F1
ou Ctrl + Shift + P
2. Tapez export dans la barre
de recherche
3. Sélectionnez Markdown
PDF : Export (pdf)
4. Attendez, le PDF sera
généré dans le même
répertoire que le document
markdown
Avec le même nom
420-C13-IN | Automne 2021 | Godefroy Borduas 36
Crédit image
Fonds vecteur créé par rawpixel.com - fr.freepik.com
420-C13-IN | Automne 2021 | Godefroy Borduas 37
