Mémo Markdown

Markdown a été créé par John Gruber en 2004. Markdown est conçu pour être aussi facile à lire et à écrire que possible. Il est aisément convertible en HTML.
Les fichiers Markdown possèdent l’extension .md. Markdown est également le langage des cellules de texte d'un notebook Jupyter.

Voici la plupart des éléments de la syntaxe Markdown et leur équivalent en HTML.

Titres

MarkdownHTML

# Titre de niveau 1  
## Titre de niveau 2
### Titre de niveau 3
#### Titre de niveau 4
##### Titre de niveau 5
###### Titre de niveau 6

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Emphase

MarkdownHTMLAperçu

*Texte en italique*
**Texte en gras**   
~~Texte barré~~

<p><em>Texte en italique</em></p>
<p><strong>Texte en gras</strong> </p>
<p><s>Texte barré</s></p>

Texte en italique
Texte en gras
~~Texte barré~~

Listes

Listes à puces

MarkdownHTMLAperçu

* Élément 1
* Élément 2
    * Sous-élément 1
    * Sous élément 2
* Élément 3

<ul>
<li>Élément 1</li>
<li>Élément 2
    <ul>
        <li>Sous-élément 1</li>
        <li>Sous élément 2</li>
    </ul>
</li>
<li>Élément 3</li>
</ul>

Élément 1
Élément 2
- Sous-élément 1
- Sous élément 2
Élément 3

Listes ordonnées

MarkdownHTMLAperçu

1. Élément 1
2. Élément 2
    1. Sous-élément 1
    2. Sous élément 2
3. Élément 3

<ol>
<li>Élément 1</li>
<li>Élément 2
    <ol>
        <li>Sous-élément 1</li>
        <li>Sous élément 2</li>
    </ol>
</li>
<li>Élément 3</li>
</ol>

Élément 1
Élément 2
1. Sous-élément 1
2. Sous élément 2
Élément 3

Remarque : la valeur numérique des entrées des éléments n'a pas d'importance :

MarkdownAperçu

1. Élément 1
1. Élément 2
4. Élément 3

Élément 1
Élément 2
Élément 3

Listes à cocher

MarkdownHTMLAperçu

- [x] Élément 1, coché
- [ ] Élément 2, non-coché
    - [x] Sous-élément 2.1, coché
    - [ ] Sous-élément 2.2, non-coché
- [ ] Élément 3, non-coché

<ul>
<li>
    <label>
        <input type="checkbox" checked>
        Élément 1, coché
    </label>
</li>
<li>
    <label>
        <input type="checkbox">
        Élément 2, non-coché
    </label>
</li>
<ul>
    <li>
        <label>
            <input type="checkbox" checked>
            Sous-élément 2.1, coché
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox">
            Sous-élément 2.2, non-coché
        </label>
    </li>
</ul>
<li>
    <label>
        <input type="checkbox">
        Élément 3, non-coché
    </label>
</li>
</ul>

Citations

MarkdownHTMLAperçu

> Voici une citation  
> sur plusieurs lignes

<blockquote>
<p>Voici une citation</p>  
<p>sur plusieurs lignes</p>  
</blockquote>

Voici une citation
sur plusieurs lignes

Séparateurs horizontaux

MarkdownHTMLAperçu

 ---  

ou *** ou ___

<hr/>

Liens

MarkdownHTMLAperçu

[Ceci est le texte du lien](https://www.carnets.info)

[Ceci est un lien avec un titre au survol](https://www.carnets.info "Le titre du lien")

 Ceci est un lien automatique : https://www.carnets.info
 On rencontre aussi cette syntaxe : <https://www.carnets.info>

<p><a href="https://www.carnets.info">Ceci est le texte du lien</a></p>

<p><a href="https://www.carnets.info" title="Le titre du lien">Ceci est un lien avec un titre au survol</a></p>

<p>Ceci est un lien automatique : <a href="https://www.carnets.info">https://www.carnets.info</a></p>
<p> On rencontre aussi cette syntaxe : <a href="https://www.carnets.info">https://www.carnets.info</a></p>

Ceci est le texte du lien

Ceci est un lien avec un titre au survol

Ceci est un lien automatique : https://www.carnets.info
On rencontre aussi cette syntaxe : https://www.carnets.info

Images

MarkdownHTMLAperçu

![logo Markdown](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Markdown"){width=30}

<img
src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png"
alt="logo Markdown"
title="Logo Markdown"
width=30
>

logo Markdown

Tableaux

MarkdownHTMLAperçu

Titre colonne 1 (gauche) | Titre colonne 2 (centré) | Titre colonne 3 (droite)
:--- | :---: | ---:
Cellule 1.1 | Cellule 1.2 | Cellule 1.3
Cellule 2.1 | Cellule 2.2 | Cellule 2.3

<table>
<thead>
    <tr>
        <th>Titre colonne 1</th>
        <th>Titre colonne 2</th>
        <th>Titre colonne 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cellule 1.1</td>
        <td>Cellule 1.2</td>
        <td>Cellule 1.3</td>
    </tr>
    <tr>
        <td>Cellule 2.1</td>
        <td>Cellule 2.2</td>
        <td>Cellule 2.3</td>
    </tr>
</tbody>
</table>

Titre colonne 1 (gauche)	Titre colonne 2 (centré)	Titre colonne 3 (droite)
Cellule 1.1	Cellule 1.2	Cellule 1.3
Cellule 2.1	Cellule 2.2	Cellule 2.3

Code

Code en ligne

MarkdownHTMLAperçu

insertion de code en ligne : `print("Hello World!")`  
avec coloration syntaxique (MkDocs +  InlineHilite) : `#!py3 print("Hello World!)"

<p>insertion de code en ligne : <code>print("Hello World!")</code></p>

insertion de code en ligne : print("Hello World!")
avec coloration syntaxique (MkDocs + InlineHilite) : print("Hello World!")

Bloc de code

Bloc de code simple

MarkdownHTMLAperçu

```python
print("Hello World!")
```

<pre> print("Hello World!")</pre>

print("Hello World!")

Bloc de code avec titre

Markdown (MkDocs)Aperçu

```python title="Bloc de code avec titre"
print("Hello World!")
```

Bloc de code avec titre

print("Hello World!")

Bloc de code avec lignes numérotées

Markdown (MkDocs)Aperçu

```python linenums="1"
print("Hello World!")
print("Hello World!")
```

print("Hello World!")
print("Hello World!")

Bloc de code avec annotation

Markdown (MkDocs)Aperçu

```python
print("Hello World!") # (1)!
```
1.  :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted text__, images, ... basically anything that can be written in Markdown.

print("Hello World!") # (1)!

I'm a code annotation! I can contain code, formatted text, images, ... basically anything that can be written in Markdown.

Bloc de code avec lignes surlignées

Markdown (MkDocs)Aperçu

``` python hl_lines="2 3"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

Boites colorées dans un notebook Jupyter

Markdown/HTMLAperçu

<div class = "alert alert-block alert-info"> Boite bleue</div>
<div class = "alert alert-block alert-success"> Boite verte</div>
<div class = "alert alert-block alert-warning"> Boite jaune</div>
<div class = "alert alert-block alert-danger"> Boite rouge</div>
Exemple de style personnalisé
<div class="alert alert-success" style="border-left: 10px solid #3c763d;border-radius:2px;"> </div>

Formules LaTeX

MarkdownAperçu

Mode en ligne :  
On cherche les solutions de l'équation (E) : $x^2 + 3x -7 = 0$    

Mode bloc (display) :  
On trouve :  

$$x = \frac{-3 \pm \sqrt{37}}{2}$$

Mode en ligne :
On cherche les solutions de l'équation (E) : \(x^2 + 3x -7 = 0\)

Mode bloc (display) :
On trouve :

\[x = \frac{-3 \pm \sqrt{37}}{2}\]

Mémo LaTeX

Liste des fonctions \(\TeX\)

Caractères spécifiques

Tirets

Il n'y a pas de balise Markdown spécifique pour réaliser des tirets cadratins ou demi-cadratins. On utilise des balises HTML pour créer ces tirets.

tiret long ou tiret cadratin :

HTMLAperçu

—

—

tiret moyen ou tiret demi-cadratin

HTMLAperçu

–

–

Touches clavier

MarkdownHTMLAperçu

++ctrl+alt+del++

<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>

Ctrl+Alt+Del

Notes de bas de page

Markdown

Voici une référence à une note de bas de page[^a].
Et une autre[^b].  
On peut rappeler une même référence plusieurs fois[^b].

[^a]: Les notes de bas de page peuvent être **mises en forme**,  
et sur plusieurs lignes.  
[^b]: Autre note de bas de page.

Aperçu :
Voici une référence à une note de bas de page¹. Et une autre².
On peut rappeler une même référence plusieurs fois².

Les notes de bas de page peuvent être mises en forme,
et sur plusieurs lignes. ↩
Autre note de bas de page. ↩↩