Bienvenue dans ce guide détaillé sur la maîtrise de la syntaxe Markdown, un outil indispensable pour tout créateur de contenu sur des plateformes comme Hugo. Markdown est un langage de balisage léger qui vous permet de formater du texte en utilisant une syntaxe simple et intuitive, qui est ensuite convertie en HTML. Cette simplicité rend la rédaction de contenu plus rapide et plus agréable, tout en garantissant que votre texte reste lisible même dans son format brut.

Titres

Les titres sont essentiels pour structurer votre contenu et améliorer sa lisibilité. En Markdown, vous pouvez créer des titres en utilisant le symbole dièse (#). Le nombre de dièses détermine le niveau du titre :

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

Dans le contexte du site officiel de la diffusion de la Coupe du Monde, l’utilisation de titres clairs est cruciale pour organiser les informations sur les matchs, les équipes et les analyses. Par exemple, un titre de niveau 1 pourrait être “Coupe du Monde 2026 : Analyse Complète”, suivi de titres de niveau 2 comme “Résultats des Matchs”, “Statistiques des Joueurs”, et “Actualités des Équipes”.

Paragraphes et Retours à la Ligne

Les paragraphes sont créés en laissant une ligne vide entre deux blocs de texte. Les retours à la ligne simples à l’intérieur d’un paragraphe ne sont généralement pas interprétés comme un nouveau paragraphe HTML. Si vous avez besoin d’un retour à la ligne forcé, vous pouvez utiliser deux espaces à la fin de la ligne, ou insérer une balise <br>.

Listes

Markdown prend en charge les listes ordonnées et non ordonnées.

Listes Non Ordonnées

Utilisez des tirets (-), des astérisques (*) ou des plus (+) pour créer des listes non ordonnées.

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

Listes Ordonnées

Utilisez des nombres suivis d’un point (1., 2., etc.) pour créer des listes ordonnées. L’ordre des nombres n’a pas d’importance ; Markdown les numérotera correctement.

1. Première étape
2. Deuxième étape
   1. Sous-étape 2.1
   2. Sous-étape 2.2
3. Troisième étape

Les listes sont parfaites pour énumérer les fonctionnalités de la plateforme, les étapes pour regarder un match, ou les équipes participant à un tournoi. Par exemple, une liste des fonctionnalités du site pourrait inclure :

1. Diffusion HD en direct
2. Scores en temps réel
3. Actualités des équipes
4. Analyses de matchs

Mise en Forme du Texte

Vous pouvez mettre en forme votre texte pour le rendre plus percutant :

• Gras : Entourez le texte de deux astérisques (**gras**) ou de deux tirets bas (__gras__).
• Italique : Entourez le texte d’un astérisque (*italique*) ou d’un tiret bas (_italique_).
• Gras et Italique : Combinez les deux (***gras et italique***).
• Barré : Entourez le texte de deux tildes (~~barré~~).

Liens

Pour créer des liens, utilisez la syntaxe suivante : [Texte du lien](URL).

[Visitez le site officiel de la Coupe du Monde](https://www.fifa.com/)

Pour les liens externes, il est souvent utile d’ajouter un attribut target="_blank" pour qu’ils s’ouvrent dans un nouvel onglet, bien que cela soit généralement géré par le thème de votre site Hugo.

Images

Pour insérer une image, utilisez la syntaxe : ![Texte alternatif](URL de l'image). Le texte alternatif est important pour l’accessibilité (lecteurs d’écran) et est affiché si l’image ne peut pas être chargée.

![Logo de la Coupe du Monde](/images/worldcup-logo.png)

Si vous souhaitez ajouter une légende ou ajuster la taille de l’image, vous devrez généralement utiliser des balises HTML directement dans votre Markdown, car Markdown pur a des capacités limitées pour cela. Par exemple :

<figure>
  <img src="/images/worldcup-logo.png" alt="Logo de la Coupe du Monde">
  <figcaption>Le logo officiel de la Coupe du Monde.</figcaption>
</figure>

Pour les articles sur le site de la Coupe du Monde, l’insertion d’images de haute qualité des joueurs, des stades ou des trophées est essentielle.

Blocs de Code

Pour afficher des blocs de code, utilisez trois backticks (```) sur une ligne séparée avant et après le code. Vous pouvez spécifier le langage pour une coloration syntaxique.

```html
<!DOCTYPE html>
<html>
<body>
  <h1>Mon site</h1>
</body>
</html>

Pour du code en ligne, utilisez un seul backtick : `<code>comme ceci</code>`.

### Citations

Utilisez le symbole supérieur à (`>`) pour créer des blocs de citation.

```markdown
> Ceci est une citation. Elle peut s'étendre sur plusieurs lignes.

Ceci est utile pour citer des déclarations officielles, des avis d’experts ou des commentaires de fans.

Lignes Horizontales

Une ligne horizontale peut être créée en utilisant trois ou plus astérisques (***), tirets (---), ou plus (+++) sur une ligne séparée.

---

Tableaux

Les tableaux peuvent être créés en utilisant des barres verticales (|) et des tirets (-).

| En-tête 1 | En-tête 2 | En-tête 3 |
|----------|----------|----------|
| Ligne 1, Cellule 1 | Ligne 1, Cellule 2 | Ligne 1, Cellule 3 |
| Ligne 2, Cellule 1 | Ligne 2, Cellule 2 | Ligne 2, Cellule 3 |

Les tableaux sont excellents pour comparer des statistiques de joueurs, des classements de groupes ou des calendriers de matchs.

Notes de bas de page

Les notes de bas de page sont créées avec un marqueur référence [^1] et la définition de la note de bas de page est placée dans une section séparée à la fin du document : [^1]: Le texte de la note de bas de page.

Ceci est un texte avec une note de bas de page.[^1]

[^1]: Voici le contenu de la note de bas de page.

Utilisation dans Hugo

Hugo utilise le moteur de rendu Goldmark par défaut, qui prend en charge la plupart des extensions Markdown communes, y compris les tableaux, les listes de tâches et les notes de bas de page. Assurez-vous que votre configuration Hugo est adaptée pour activer ces fonctionnalités si elles ne le sont pas par défaut. Par exemple, pour activer les tableaux, vous pourriez avoir une ligne dans votre config.toml ou hugo.toml comme :

[markup.goldmark.renderer]
unsafe = true # Permet le rendu des balises HTML brutes

[markup.goldmark.parser.attribute]
block = true # Active le support des attributs de bloc comme { .ma-classe }
extended = true # Active les extensions comme les tableaux, les notes de bas de page, etc.

En maîtrisant ces éléments de syntaxe Markdown, vous serez en mesure de créer un contenu riche, structuré et engageant pour votre site Hugo, qu’il s’agisse d’articles de blog sur la Coupe du Monde, de descriptions de fonctionnalités ou de mises à jour importantes.