Markdown

☰

Pour rédiger en Markdown, il faut connaître les bases de ce langage de balisage léger.

HTML

Markdown permet d'utiliser pleinement le HTML, le CSS et le JavaScript ! A vous les joies de la personnalisation !

<div style="border: 1px solid black; padding: 10px; margin: auto; width: fit-content;">
    <div style="display: flex; gap: 15px; align-items: center; flex-direction: row">
        <p>Hello World!</p>
        <button>Click me!</button>
    </div>
</div>

Titres

Pour créer un titre, il suffit de mettre un # devant le texte du titre.
Il existe 6 niveaux de titres, du plus grand au plus petit qui permettent de structurer votre contenu.

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

Texte

Il est possible de mettre en forme le texte en gras, en italique, en barré, en souligné, en couleur, etc.

Pour mettre un texte en gras, il suffit de mettre le texte entre deux ** ou deux __.

**Texte en gras**
__Texte en gras__

Pour mettre un texte en italique, il suffit de mettre le texte entre deux * ou deux _.

*Texte en italique*
_Texte en italique_

Pour mettre un texte en barré, il suffit de mettre le texte entre deux ~~.

~~Texte barré~~

Pour mettre un texte en souligné, il suffit de mettre le texte entre deux <u>.

<u>Texte souligné</u>

Pour mettre un texte en couleur, il suffit de mettre le texte entre deux <span style="color: couleur;">.

<span style="color: red;">Texte en rouge</span>

Pour afficher le texte en gras et le faire ressortir, il suffit d'utiliser un backtick ` avant et après le texte.

`Texte en gras`

Liens

Pour insérer un lien, il suffit de mettre le texte du lien entre crochets, suivi du lien entre parenthèses.

Cela peut être un lien vers une page web, un fichier à télécharger, une autre page de votre site, etc.

[Texte du lien](https://www.lien-du-site.com)

Do-It

Images & Vidéos

Image

Pour insérer une image, il suffit de mettre un point d'exclamation, le texte alternatif de l'image entre crochets, suivi du lien de l'image entre parenthèses.

Vous pouvez également ajouter des légendes à vos images en ajoutant un texte après le lien de l'image. Ces légendes s'afficheront en passant la souris sur l'image.

![image à voir](./mon-image.png "Légende visible en passant la souris")

Vous pouvez utiliser une taille personnalisée pour vos images en utilisant le shortcode sizedImage.

Vidéo

Pour insérer une vidéo, vous devez utiliser la balise <video> de HTML.
Vous pouvez ainsi paramétrer la vidéo comme vous le souhaitez.

<div style="margin: auto; width: fit-content">
  <video style="max-height: min(50vh, 300px)" controls loop>
    <source src="/assets/video/maid_knight.mp4" type="video/mp4">
    Votre navigateur ne supporte pas la balise video.
  </video>
</div>

Tables

Markdown permet de créer des jolis tableaux pour structurer les données. La syntaxe est simple et intuitive.
On utilise les possibilités de multimarkdown

Table avec titre

Code :

| titre colonne 1  | titre colonne 2 |
| ---------------- | --------------- |
| Content Cell     | Content Cell    |
| Content Cell     | Content Cell    |

Tables sans titre

Code :

| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Tables multi-colonnes

Code :

| ------------- | ------------- |
| Je prends 2 colonnes ||
| Content Cell | Content Cell |

Tables multi-lignes

Code :

| ------------- | ------------- |
| Je prends 2 lignes |Content Cell |
| ^^ |Content Cell |
| Content Cell | Content Cell |

plusieurs ligne dans une cellule

Code :

| ------------- | ------------- |
| 1. ligne colonne 1 | 1. ligne colonne 2 | \
| 1. ligne colonne 1 | 2. ligne colonne 2 |
| Content Cell | Content Cell |

Alignement horizontal

Code :

| :- | :-: | -: |
| Content Cell | Content Cell | Content Cell |
| Content Cell | Content Cell |Content Cell |
| Content Cell | Content Cell |Content Cell |

Alignement vertical

On ajoute un style, mais il ne faut pas que ce soit la dernière colonne. Exemple sur une colonne multi-ligne :

Code :

| ------------- | ------------- |
| Content Cell {style="vertical-align:middle"}| Content Cell |
| ^^| Content Cell |
| Content Cell | Content Cell |

Si l'on veut avoir un alignement vertical de la dernière colonne, il faut ajouter une colonne vide (je ne sais pas trop pourquoi) :

Code :

| ------------- | ------------- | - |
| Content Cell | Content Cell {style="vertical-align:middle"}| |
| Content Cell | ^^ | |
| Content Cell | Content Cell | |

Code

Pour insérer du code, il suffit de mettre le code entre trois backticks.
Vous pouvez également spécifier le langage de programmation pour avoir une coloration syntaxique grâce à PrismJS.

PrismJS ajoute automatiquement la coloration syntaxique, affiche le langage utilisé et permet de copier directement le code.

```python
def hello():
    print("Hello World!")

if __name__ == "__main__":
    hello()
```

def hello():
    print("Hello World!")

if __name__ == "__main__":
    hello()

Autres guides

• Guide des extensions apportées par Eleventy
• Guide ShortCodes pour le site
• Guide de contribution au site
• Documentation du site (anglais)
• Guide de contribution complet (anglais)