Markdown⚓︎
Auteur : Franck CHAMBON
Vocabulaire et objectifs⚓︎
Markdown
Markdown est un langage de balisage léger qui est traduit en HTML, langage que le navigateur est capable de lire pour produire une page web.
On peut aussi, à partir d'un fichier Markdown .md, produire
un fichier .pdf, ou .odt, ou .docx en utilisant
l'utilitaire Pandoc.
Nous ne nous en servirons pas ici.
Il ne faut que 5 minutes pour avoir les bases suffisantes.
Utilisation répandue
On peut utiliser la syntaxe Markdown dans de nombreuses situations de travail collaboratif.
- Dans des forums, comme Discourse, GitLab, Reddit, Qt, Stack Overflow et Stack Exchange parmi d'autres.
- Dans des logiciels, comme CodiMD, Jupyter, ou MkDocs parmi d'autres.
Défaut
Soyons honnêtes, il y a un défaut, Markdown n'est pas unifié.
- Il existe plusieurs variantes légèrement différentes de Markdown.
- Pour chaque variante, il peut exister des moteurs de rendus légèrement différents.
Nous utiliserons ici la partie commune à toutes les versions, avec le style le plus commun possible, ce sera en particulier utile pour travailler avec Jupyter.
Dans la partie suivante nous travaillerons avec certaines facilités offertes par MkDocs.
D'autres tutoriels
- Markdown Guide ; assez complet.
- Markdown Tutorial ; avec exercices, (multilingue, mais ...)
- Tutorial.md ; interactif, mérite une traduction !
- Élaboration et conversion de documents avec Markdown et Pandoc ; pour les utilisateurs avancés.
Les bases de Markdown⚓︎
Quelques exemples
| Objectif | Markdown | Rendu |
|---|---|---|
| Créer un lien | [texte cliquable](https://mon_lien.fr) |
texte cliquable |
| Emphase faible | Un _mot_ discret |
Un mot discret |
| Emphase forte | Un **mot** visible |
Un mot visible |
| Du code en ligne | Une boucle `for` |
Une boucle for |
Architecture⚓︎
La première étape
Un document doit être structuré en parties et sous parties.
Le titre d'une partie (ou en-têtes) est précédé d'un ou plusieurs croisillons : #
Sur un clavier azerty, Le croisillon s'obtient avec AltGr＋3.
On ajoute une espace après le dernier croisillon.
On saute une ligne avant et après l'en-tête.
Entrée
# Mon super titre
Mon premier paragraphe.
Rendu
Mon super titre
Mon premier paragraphe.
Entrée
#Mon super titre
Mon premier paragraphe.
Rendu
#Mon super titre Mon premier paragraphe.
Ce rendu dépend du moteur...
Example concret
Pour cette page, le brouillon de structure a commencé ainsi
# Les bases du Markdown
## Vocabulaire et objectifs
## Construire une note
### Architecture
Avec croisillons.
### Paragraphes
Avec saut de ligne.
### Listes
Avec `-`, ou `1.`
Imbriquées...
### Liens
url et image
### Emphase
`_` et `*`
### Citations
`>`
### Bloc de code
Par décalage.
### Code en ligne
Avec `` ` ``
### Ligne horizontale
Avec `---`
Paragraphes⚓︎
Le saut de ligne
Pour séparer les paragraphes, il suffit de sauter une ligne.
Il ne faut pas indenter son paragraphe dans le fichier source.
Entrée
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin at cursus nibh,
et lobortis mauris. Sed tempus turpis
quis turpis pulvinar, ac vehicula dui
convallis. Phasellus tempus massa quam,
ac mollis libero cursus eget.
Donec convallis a nisl vitae scelerisque.
Ut vel nisl id augue ullamcorper lobortis
at id dolor.
Rendu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at cursus nibh, et lobortis mauris. Sed tempus turpis quis turpis pulvinar, ac vehicula dui convallis. Phasellus tempus massa quam, ac mollis libero cursus eget. Donec convallis a nisl vitae scelerisque. Ut vel nisl id augue ullamcorper lobortis at id dolor.
Entrée
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin at cursus nibh,
et lobortis mauris. Sed tempus turpis
quis turpis pulvinar, ac vehicula dui
convallis. Phasellus tempus massa quam,
ac mollis libero cursus eget.
Donec convallis a nisl vitae scelerisque.
Ut vel nisl id augue ullamcorper lobortis
at id dolor.
Rendu
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin at cursus nibh, et lobortis mauris. Sed tempus turpis quis turpis pulvinar, ac vehicula dui convallis. Phasellus tempus massa quam, ac mollis libero cursus eget. Donec convallis a nisl vitae scelerisque. Ut vel nisl id augue ullamcorper lobortis at id dolor.
Une partie du texte devient du code en bloc, avec une police à chasse fixe.
Aller à la ligne⚓︎
Sans changer de paragraphe
Dans de rares cas, si on souhaite sauter de ligne, sans changer de paragraphe, on ajoute deux espaces à la fin d'une ligne.
Entrée
ligne1␣␣
ligne2
Rendu
ligne1
ligne2
🤞 : On a symbolisé les deux espaces avec ␣␣, mais il faut utiliser l'espace classique.
Ici, ␣␣ ne sert que d'illustration.
Entrée
ligne1
ligne2
Rendu
ligne1 ligne2
Échec uniquement si on voulait forcer un saut de ligne.
Deux espaces ou plus
En sélectionnant le texte, vous verrez deux véritables espaces à la fin de ligne 1 dans l'entrée correcte.
Sans les deux espaces, le saut de ligne est considéré comme une unique espace entre les deux lignes, donc une seule ligne pour le navigateur.
On peut mettre plus de deux espaces.
Bonne pratique
Il est pratique d'avoir son code sans longue ligne, on peut donc les couper dans le source où on veut. Elles sont donc recollées ensuite, dans un seul paragraphe. Ce paragraphe sera adapté à chaque écran, c'est au navigateur de choisir les sauts de ligne. C'est une bonne pratique.
On n'utilise que rarement des sauts de ligne forcés (avec les deux espaces en fin de ligne), sans changer de paragraphes, vous ne devriez pas en faire, sauf raison motivée. On laisse au navigateur le soin de couper les lignes en fonction de l'affichage disponible : écran large, moyen ou restreint sur téléphone.
Éditeur
- Certains éditeurs de texte suppriment les espaces de fin de ligne ; votre document serait modifié !
- Conseil : il est possible, avec son éditeur, d'afficher discrètement les espaces ; c'est une bonne pratique.
Ligne horizontale⚓︎
Séparer deux paragraphes
Si on souhaite une ligne horizontale, on utilise ---
entre les deux paragraphes, avec des lignes vides de part et d'autre.
Entrée
Paragraphe 1...
---
Paragraphe 2...
Rendu
Paragraphe 1...
Paragraphe 2...
Entrée
Paragraphe 1...
---
Paragraphe 2...
Rendu
Paragraphe 1...
Paragraphe 2...
Il s'agit en fait d'une méthode non recommandée pour créer des en-têtes !
Listes⚓︎
Une ligne vide puis...
Une liste, comme un nouveau paragraphe, doit être précédée d'une ligne vide. Certains moteurs Markdown acceptent qu'il n'y ait pas de saut de ligne, comme avec Jupyter, mais pas tous.
Les règles
- Sauter une ligne avant la première puce.
- Ensuite, on place chaque item sur une ligne en commençant par
- - On peut faire des listes numérotées en commençant par
1. - On place aussi une espace juste avant son item.
Liste à puce
Entrée
Markdown est **très** utilisé dans de _nombreuses_ situations
- Jupyter
- MkDocs
- Discourse
- GitLab
- Reddit
- Qt
- Stack Overflow
- Stack Exchange
- ...
Rendu
Markdown est très utilisé dans de nombreuses situations
- Jupyter
- MkDocs
- Qt
- Stack Overflow
- Stack Exchange
- ...
Pour information, la traduction pour le navigateur.
Code HTML
<p>Markdown est <strong>très</strong> utilisé dans de <em>nombreuses</em> situations</p>
<ul>
<li>Jupyter</li>
<li>MkDocs</li>
<li>Discourse</li>
<li>GitLab</li>
<li>Reddit</li>
<li>Qt</li>
<li>Stack Overflow</li>
<li>Stack Exchange</li>
<li>...</li>
</ul>
On remarquera un peu de mise de style (l'emphase) ; nous y reviendrons.
On remarque aussi une meilleure lisibilité du Markdown sur le HTML.
Liste numérotée
Entrée
Pour une liste numérotée, la numérotation est automatique !
1. Mon premier exemple
3. Le troisième, mais le deuxième a été effacé
3. Un oubli entre le troisième et quatrième
3. Encore un oubli...
4. C'était le quatrième au départ.
1. Juste un de plus qui sera numéroté correctement.
Rendu
Pour une liste numérotée, la numérotation est automatique !
- Mon premier exemple
- Le troisième, mais le deuxième a été effacé
- Un oubli entre le troisième et quatrième
- Encore un oubli...
- C'était le quatrième au départ.
- Juste un de plus qui sera numéroté correctement.
Pour information, la traduction pour le navigateur.
Code HTML
<p>Pour une liste numérotée, la numérotation est automatique !</p>
<ol>
<li>Mon premier exemple</li>
<li>Le troisième, mais le deuxième a été effacé</li>
<li>Un oubli entre le troisième et quatrième</li>
<li>Encore un oubli...</li>
<li>C'était le quatrième au départ.</li>
<li>Juste un de plus qui sera numéroté correctement.</li>
</ol>
On remarque que l'on n'a pas à se soucier de la cohérence de la numérotation dans le source, on peut donc ajouter, ou enlever des items sans revoir la numérotation.
Technique avancée
On peut imbriquer les listes numérotées ou non.
On indente la liste imbriquée qu'il est inutile de séparer avec des lignes vides. Contrairement à la première liste.
Entrée
On va faire une liste
1. un
1. deux
- machin
- chose
31. Pour commencer à 31
1984. Ce ne sera pas 1984 !
1. trois
Rendu
On va faire une liste
- un
- deux
- machin
- chose
- Pour commencer à 31
- Ce ne sera pas 1984 !
- trois
Le rendu de la numérotation des listes imbriquées dépend du moteur. Ne pas lui faire confiance.
De même, on peut imbriquer des paragraphes, des blocs de code, en les indentant en plus également de la même manière.
Autres puces, indentation
Avec certains moteurs Markdown, il est possible d'utiliser les puces *, -, +.
Nous ne recommandons d'utiliser que les puces -.
Pour les listes imbriquées, nous recommandons une indentation de 4 espaces.
Liens⚓︎
Créer un lien avec une URL
Une URL permet d'identifier une ressource et le protocole associé.
La syntaxe est [<objet>](<url>)
<objet>pourra être du texte ou une image, ou autre.<url>pourra être une adresse web, ou mail, ou autre protocole.- Une adresse web peut pointer vers un document HTML, une image, un son...
Entrée
Voici [un lien](https://startpage.com/) vers un moteur de recherche.
Rendu
Voici un lien vers un moteur de recherche.
Entrée
Pour [écrire](mailto:john.doe@mail.com) à quelqu'un.
Rendu
Pour écrire à quelqu'un.
Entrée
Pour [contacter rapidement](tel:+33 1 234 567 890) ce numéro.
Rendu
Pour contacter rapidement ce numéro.
Le lien ne fonctionnera que si la page est lue avec un navigateur qui a accès au protocole. Concrètement, sur un smartphone !
Technique avancée
On peut ajouter une info bulle au lien.
La syntaxe est [<objet>](<url> "<message>")
Entrée
Un autre moteur de recherche est [DuckDuckGo](https://duckduckgo.com/ "Votre confidentialité, simplifiée").
Rendu
Un autre moteur de recherche est DuckDuckGo.
Technique simplifiée
Si on souhaite simplement activer l'url, sans changer le nom, ni mettre d'info-bulle.
La syntaxe est < url >
Le protocole est automatiquement déduit.
Entrée
- Mon site web <https://mon_joli_site.fr>
- Mon mail <prénom.nom@chez.moi>
Rendu
- Mon site web https://mon_joli_site.fr
- Mon mail prénom.nom@chez.moi
Emphase⚓︎
Pas trop gras svp !
Commençons par indiquer que certains documents abusent des effets de style et la lisibilité en est réduite.
L'emphase sert à faire ressortir une partie plus importante que le reste. Ce ne peut être qu'une petite partie.
Définitions
- L'emphase faible sert à faire ressortir discrètement du texte. Elle est souvent en italique, mais on peut changer cela dans une feuille de style en cascade (CSS).
- De même, l'emphase forte est souvent en gras, mais on pourrait décider dans la feuille CSS de modifier ce style en couleur rouge et souligné en noir. Et puis changer un autre jour ; l'ensemble du document soumis à la feuille CSS est modifié.
Balises HTML
<em>pour l'emphase faible<strong>pour l'emphase forte- il en existe d'autres.
- En Markdown, on peut aussi inclure quelques balises HTML au milieu du Markdown. Ce sera dans la partie avancée... Dans un premier temps, on recommande de ne pas en inclure.
Astérisque et tiret-bas
Le tiret-bas est recommandé.
Entrée
Du _texte en italique_ entouré de la balise tiret bas *ou* une étoile.
Rendu
Du texte en italique entouré de la balise tiret bas ou une étoile.
HTML
<p>Du <em>texte en italique</em> entouré de la balise tiret bas <em>ou</em> une étoile.</p>
L'astérisque est recommandé.
Entrée
Du **texte en gras** entouré de la balise double étoile, __ou__ double tiret bas.
Rendu
Du texte en gras entouré de la balise double étoile, ou double tiret bas.
HTML
<p>Du <strong>texte en gras</strong> entouré de la balise double étoile, <strong>ou</strong> double tiret bas.</p>
Entrée
**_Un_** exemple _avec_ tous *les* cas *__possibles__*, **fort1** ou __fort2__.
Rendu
Un exemple avec tous les cas possibles, fort1 ou fort2.
HTML
<p><strong><em>Un</em></strong> exemple <em>avec</em> tous <em>les</em> cas <em><strong>possibles</strong></em>, <strong>fort1</strong> ou <strong>fort2</strong>.</p>
Recommandation
Entrée
- Pour l'emphase faible, _un_ tiret-bas.
- Pour l'emphase forte, **deux** astérisques.
Rendu
- Pour l'emphase faible, un tiret-bas.
- Pour l'emphase forte, deux astérisques.
Citations⚓︎
Avec un chevron
Suivant l'ancien modèle sur les mails en mode texte, quand on répond à un message, le texte est décalé et chaque ligne est précédée d'un chevron >.
Entrée
> **Cookie** :
>
> - Anciennement petit gâteau sucré, qu'on acceptait avec plaisir.
> - Aujourd'hui : petit fichier informatique drôlement salé, qu'il faut refuser avec véhémence.
De Luc Fayard, _Dictionnaire impertinent des branchés_
Rendu
Cookie :
- Anciennement petit gâteau sucré, qu'on acceptait avec plaisir.
- Aujourd'hui : petit fichier informatique drôlement salé, qu'il faut refuser avec véhémence.
De Luc Fayard, Dictionnaire impertinent des branchés
Voici un example de mail qu'on peut recevoir, témoin d'un échange. Quand un mail est long, on peut avoir envie de répondre dans la partie associée et non tout d'un bloc au départ.
L'un dit « Salut ; À+», l'autre dit « Bonjour ; Merci ».
Entrée
Salut, c'est bon pour dimanche, pour le reste je réponds dans le corps du mail.
À+
> Bonjour,
> un long blabla...
> avec une question pour dimanche.
> Et une autre question_1.
Réponse à question_1.
> Sinon blabla, et question_2.
Réponse à question_2.
> > Salut,
> > Tu fais quoi dimanche ?
> > À+
> Alors, je pense que...
> Merci et bonne journée
Rendu
Salut, c'est bon pour dimanche, pour le reste je réponds dans le corps du mail. À+
Bonjour,
un long blabla...
avec une question pour dimanche.
Et une autre question_1.
Réponse à question_1.
Sinon blabla, et question_2.
Réponse à question_2.
Salut,
Tu fais quoi dimanche ?
À+Alors, je pense que...
Merci et bonne journée
Code en bloc⚓︎
En indentant le bloc, 4 espaces
La méthode simple pour qu'un extrait ne soit pas formaté est de décaler le bloc de 4 espaces ou plus. On saute également une ligne avant et après, comme pour un paragraphe.
Entrée
Voici un code Python
n = 47**2 + 31**2
Rendu
Voici un code Python
n = 47**2 + 31**2
Entrée
Voici un code Python
n = 47**2 + 31**2
Rendu
Voici un code Python
n = 472 + 312
Ici le moteur a interprété une partie avec de l'emphase forte.
Et la coloration syntaxique ?
Nous verrons cela dans une partie de Markdown avancé.
Code en ligne⚓︎
Avec l'accent grave
Avec un clavier azerty, AltGr＋7 donne l'accent grave `
On utilise la syntaxe : Du texte avec un `identifiant` de code.
Entrée
La définition de la fonction `premier` commence avec le mot clé `def`
Elle prend en paramètre un entier `n`
Elle renvoie un booléen avec le mot clé `return`
Rendu
La définition de la fonction premier commence avec le mot clé def
Elle prend en paramètre un entier n
Elle renvoie un booléen avec le mot clé return
Entrée
La définition de la fonction _premier_ commence avec le mot clé **def**
Elle prend en paramètre un entier _n_
Elle renvoie un booléen avec le mot clé **return**
Rendu
La définition de la fonction premier commence avec le mot clé def
Elle prend en paramètre un entier n
Elle renvoie un booléen avec le mot clé return
Les effets de texte ne servent pas à désigner des bouts de code.
Entrée
La définition de la fonction `#!py3 premier` commence avec le mot clé `#!py3 def`
Elle prend en paramètre un entier `#!py3 n`
Elle renvoie un booléen avec le mot clé `#!py3 return`
Rendu
La définition de la fonction premier commence avec le mot clé def
Elle prend en paramètre un entier n
Elle renvoie un booléen avec le mot clé return
Ceci n'est possible qu'avec MkDocs, et des extensions, on peut donc avoir la coloration syntaxique en ligne avec des langages variés. Nous y reviendrons plus tard.
Technique avancée
Si on souhaite écrire du code en ligne qui contient des `,
il suffit d'encadrer le morceau avec plus de ` qu'il n'y en a consécutivement dans le morceau.
Entrée
Afficher **du code** avec accent grave : `` un entier `n` ``
Rendu
Afficher du code avec accent grave : un entier `n`
Entrée
Afficher **du code** avec accent grave : `un entier `n``
Rendu
Afficher du code avec accent grave : un entiern``
Comment savoir où est la fin et le début ?
Entrée
- Afficher 1`` ` `` : `` ` ``
- Afficher 2`` ` `` : ``` `` ```
- Afficher le code précédent : ```` - Afficher 2`` ` `` : ``` `` ``` ````
Rendu
- Afficher 1
`:` - Afficher 2
`:`` - Afficher le code précédent :
- Afficher 2`` ` `` : ``` `` ```
Images⚓︎
Un lien précédé de !
La syntaxe est avec ou sans l'info-bulle
Entrée
Le logo du langage Markdown
Rendu
Le logo du langage Markdown
Texte alternatif
Une bonne pratique est de renseigner un texte alternatif, il est utilisé par les robots.
- Certains robots lisent à voix haute le contenu pour des humains, les images sont remplacées par le texte alternatif lu. Utile pour les mal-voyants.
- Certains robots font de l'indexation de site, un bon texte alternatif aide au référencement.
- Si la cible n'est plus disponible, cela arrive, le texte alternatif remplace l'image.
absolu ou relatif
Il faut faire attention à bien écrire son url.
- Si c'est en local, vérifier le chemin d'accès.
- Si c'est sur le web, bien préfixer avec le protocole
http
Tableaux⚓︎
Avec le tube
Le caractère | (barre verticale ou tube) s'obtient avec AltGr＋6.
On construit un tableau suivant le modèle suivant.
Entrée
| Objectif | Markdown | Rendu |
|---------|-------------|---|
| Créer un lien | `[texte cliquable](https://mon_lien.fr)` | [texte cliquable](https://mon_lien.fr) |
| Emphase faible | `Un _mot_ discret` | Un _mot_ discret |
| Emphase forte | `Un **mot** visible` | Un **mot** visible |
| Du code en ligne | ``Une boucle `for` `` | Une boucle `for` |
Rendu
| Objectif | Markdown | Rendu |
|---|---|---|
| Créer un lien | [texte cliquable](https://mon_lien.fr) |
texte cliquable |
| Emphase faible | Un _mot_ discret |
Un mot discret |
| Emphase forte | Un **mot** visible |
Un mot visible |
| Du code en ligne | Une boucle `for` |
Une boucle for |
HTML
Un code équivalent est bien plus délicat à écrire à la main, à lire et à maintenir...
<table>
<thead>
<tr>
<th>Objectif</th>
<th>Markdown</th>
<th>Rendu</th>
</tr>
</thead>
<tbody>
<tr>
<td>Créer un lien</td>
<td><code>[texte cliquable](https://mon_lien.fr)</code></td>
<td><a href="https://mon_lien.fr">texte cliquable</a></td>
</tr>
<tr>
<td>Emphase faible</td>
<td><code>Un _mot_ discret</code></td>
<td>Un <em>mot</em> discret</td>
</tr>
<tr>
<td>Emphase forte</td>
<td><code>Un **mot** visible</code></td>
<td>Un <strong>mot</strong> visible</td>
</tr>
<tr>
<td>Du code en ligne</td>
<td><code>Une boucle `for` </code></td>
<td>Une boucle <code>for</code></td>
</tr>
</tbody>
</table>
Quelques informations
- Il n'est pas nécessaire que les tubes soient bien alignés.
- On peut inclure du Markdown dans les cellules.
- La seconde ligne propose des options pour chaque colonne.
|:---|pour un alignement de la colonne à gauche|---:|pour un alignement de la colonne à droite|:--:|pour une colonne centrée
Exercices simples⚓︎
Facile 1⚓︎
...
Autre⚓︎
...
(NSI) Tableau donné par Python⚓︎
Liste Python vers Markdown
Donner une fonction Python qui renvoie un texte en Markdown : le tableau de valeur pour une suite donnée en paramètre avec une liste.
def tableau_markdown(liste: list) -> str:
lignes = []
ajout = lignes.append
# ... à compléter
return "\n".join(lignes)
Exemple
Pour la liste \([0, 1, 1, 2, 3, 5, 8, 13]\), on souhaite un premier rendu
| n | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|---|---|---|---|---|---|---|---|---|
| u_n | 0 | 1 | 1 | 2 | 3 | 5 | 8 | 13 |
Un code Markdown valable est
|n|0|1|2|3|4|5|6|7|
|-|-|-|-|-|-|-|-|-|
|u_n|0|1|1|2|3|5|8|13|
Ainsi on aimerait avoir
>>> tableau_markdown([0, 1, 1, 2, 3, 5, 8, 13])
'|n|0|1|2|3|4|5|6|7|\n|-|-|-|-|-|-|-|-|-|\n|u_n|0|1|1|2|3|5|8|13|\n'
Résoudre en ligne Conseil : Ouvrir un nouvel onglet.
Indice 1
Pour construire la ligne 2, on pourrait faire
q = len(liste)
ligne_2 = '|-'*(q+1) + '|'
ajout(ligne_2)
Indice 2
Pour construire la ligne 1, on pourrait faire
q = len(liste)
ligne_1 = ['|n|'] # le début de la ligne 1
for i in range(q):
ligne_1.append(f'{i}|') # chaque morceau
ajout("".join(ligne_1))
Indice 3
La ligne 3 est très proche de la ligne 1.
Indice 4
Vide.
Solution
def tableau_markdown(liste: list) -> str:
lignes = []
ajout = lignes.append
# ligne 1
q = len(liste)
ligne_1 = ['|n|'] # le début de la ligne 1
for i in range(q):
ligne_1.append(f'{i}|') # chaque morceau
ajout("".join(ligne_1))
# ligne 2
ligne_2 = '|-'*(q+1) + '|'
ajout(ligne_2)
# ligne 3
ligne_3 = ['|u_n|'] # le début de la ligne 3
for i in range(q):
ligne_3.append(f'{liste[i]}|') # chaque morceau
ajout("".join(ligne_3))
# ligne 4 vide !
ajout('')
return "\n".join(lignes)
Markdown avancé⚓︎
Coloration syntaxique du code⚓︎
Quelques exemples de programmes
Entrée
```python
for i in range(10):
print("Salut à tous !")
```
```c
#include<stdio.h>
int main(){
int i;
for(i = 0; i < 10; i++){
printf("Salut à tous !\n");
}
return 0;
}
```
Rendu
for i in range(10):
print("Salut à tous !")
#include<stdio.h>
int main(){
int i;
for(i = 0; i < 10; i++){
printf("Salut à tous !\n");
}
return 0;
}
Entrée
for i in range(10):
print("Salut à tous !")
#include<stdio.h>
int main(){
int i;
for(i = 0; i < 10; i++){
printf("Salut à tous !\n");
}
return 0;
}
Rendu
for i in range(10): print("Salut à tous !")
#include
On perd l'indentation et on peut avoir des effets non désirés !
Méthode
Il suffit d'écrire
- avant le bloc
```<nom_du_langage> - après le bloc
```
La liste des langages supportés contient entre autres aussi :
bash,diffetconsolemarkdownlatex,texetasyhtmletcssocamlsqlyaml
Utilisation avancée
Suivant le même principe que pour le code en ligne, pour donner une coloration syntaxique à un bloc qui contient lui-même un bloc, on peut utiliser un accent grave ` supplémentaire dans les délimiteurs. Exemple :
Entrée
````markdown
```python
print("Salut")
```
```c
puts("Salut");
```
````
Rendu
```python
print("Salut")
```
```c
puts("Salut");
```
Le code source de ce document comportait
`````markdown
...
`````
Ceci pour afficher l'entrée correcte, et deux blocs de 6 `, pour afficher cette remarque.
Entrée
```markdown
```python
print("Salut")
```
```c
puts("Salut");
```
```
Rendu
```python
print("Salut")
puts("Salut");
Rien ne peut être structuré...
Pour voir les options de numérotation et de marquage de lignes, avec MkDocs, on consultera cette section
Texte barré⚓︎
On encadre d'un double ~
Entrée
La Terre ~~est plate~~ bleue comme une orange.
Rendu
La Terre est plate bleue comme une orange.
Entrée
La Terre ~~ est plate~~ bleue comme une orange.
La Terre ~~est plate ~~ bleue comme une orange.
Rendu
La Terre ~~ est plate~~ bleue comme une orange.
La Terre ~~est plate ~~ bleue comme une orange.
Le double ~ doit être collé au morceau à barrer.
Pas valable avec tous les Markdown !
On en dispose avec CodiMD, Jupyter, mais aussi MkDocs avec l'extension tilde, et nous utiliserons.
Texte souligné⚓︎
On encadre d'un double ^
Entrée
La Terre bleue ^^comme^^ une orange.
Rendu
La Terre bleue comme une orange.
Entrée
La Terre est bleue ^^ comme^^ une orange.
La Terre est bleue ^^comme ^^ une orange.
Rendu
La Terre est bleue ^^ comme^^ une orange.
La Terre est bleue ^^comme ^^ une orange.
Le double ^ doit être collé au morceau à barrer.
Pas valable avec tous les Markdown !
On en dispose avec CodiMD, mais aussi MkDocs avec l'extension caret, et nous utiliserons.
Pour Jupyter, il faut utiliser la balise HTML <u>. Cependant le contenu ne pourra pas contenir de balise Markdown.
Texte surligné⚓︎
On encadre d'un double =
Entrée
La Terre bleue comme ==une orange==.
Rendu
La Terre bleue comme une orange.
Entrée
La Terre est bleue comme == une orange==.
La Terre est bleue comme ==une orange ==.
Rendu
La Terre est bleue comme == une orange==.
La Terre est bleue comme ==une orange ==.
Le double = doit être collé au morceau à barrer.
Pas valable avec tous les Markdown !
On en dispose avec CodiMD, mais aussi MkDocs.
Pour Jupyter, il faut utiliser la balise HTML <mark>. Cependant le contenu ne pourra pas contenir de balise Markdown.
Case à cocher⚓︎
On préfixe par - [ ] ou - [x]
Entrée
Une liste de tâches
- [ ] à faire
- [x] fini
- [ ] presque
- [x] fait depuis longtemps
Rendu
Une liste de tâches
- à faire
- fini
- presque
- fait depuis longtemps
Méthode
Comme pour une liste, mais on commence par
- [ ] pour une case non cochée,
- [x] pour une case cochée.
Cliquables ?
Avec certains logiciels, les cases à cocher sont cliquables, ce qui permet de modifier leur état.
- ❌ Avec Jupyter, les cases à cocher ne sont pas cliquables.
- ✅ Avec CodiMD, elles le sont, et le fichier source est modifié à la volée.
- ❓ Avec MkDocs, on peut choisir globalement sa préférence, dans ce document, elles sont cliquables.
Émojis et Unicode⚓︎
🤪👩🎨🚦🚂⚔️
Il suffit de coller vos émojis préférés depuis un site.
- Emojipedia
- GetEmoji
- Copy and Paste Emoji
- wpRock ; avec recherche en français.
- emoji copy ; permet d'en copier plusieurs à la fois.
- ...
De manière encore plus générale, il est possible d'insérer tout caractère Unicode dans le fichier source en Markdown.
Entrée
Le [copyleft](https://fr.wikipedia.org/wiki/Copyleft) (🄯), est l'autorisation donnée par l'auteur d'un travail soumis au droit d'auteur d'utiliser, d'étudier, de modifier et de diffuser son œuvre, dans la mesure où cette même autorisation reste préservée.
Le caractère copyleft (🄯) a été ajouté au standard Unicode le 5 juin 2018 au titre de la version 11.0. Il a pour code U+1F12F.
Rendu
Le copyleft (🄯), est l'autorisation donnée par l'auteur d'un travail soumis au droit d'auteur d'utiliser, d'étudier, de modifier et de diffuser son œuvre, dans la mesure où cette même autorisation reste préservée.
Le caractère copyleft (🄯) a été ajouté au standard Unicode le 5 juin 2018 au titre de la version 11.0. Il a pour code U+1F12F.
Remarque, c'est aussi valable en Python, avec par exemple, (merci @sebhoa)
JEU_52 = (
'🂡🂢🂣🂤🂥🂦🂧🂨🂩🂪🂫🂭🂮',
'🂱🂲🂳🂴🂵🂶🂷🂸🂹🂺🂻🂽🂾',
'🃁🃂🃃🃄🃅🃆🃇🃈🃉🃊🃋🃍🃎',
'🃑🃒🃓🃔🃕🃖🃗🃘🃙🃚🃛🃝🃞',
'🂠🂬🂼🃌🃜🃏🃟'
)
Le rendu sur certains systèmes d'exploitation peut être incorrect.
If faudra attendre une mise à jour proposée.
Où trouver les caractères Unicode ?
- On peut rechercher par catégorie sur Charbase
- On peut aussi trouver de nombreux caractères sur CharacterCodes
- On peut dessiner un caractère et voir s'il existe sur Shapecatcher
Exercices élaborés⚓︎
Exercice 1⚓︎
???
Exercice 2⚓︎
???