Cet article rassemble des exemples de tout ce qu’on peut écrire avec Hugo et le thème PaperMod : Markdown, coloration syntaxique, tableaux, shortcodes, notes de bas de page, etc.

Mise en forme du texte

On peut écrire en gras, en italique, en gras italique, en barré, ou en code en ligne. On insère aussi des liens : le site Hugo ou une ancre interne.

Une citation en bloc.

Elle peut s’étendre sur plusieurs paragraphes et contenir du gras ou du code.

Listes

Liste à puces

  • Premier élément
  • Deuxième élément
    • Sous-élément imbriqué
    • Autre sous-élément
  • Troisième élément

Liste numérotée

  1. Étape une
  2. Étape deux
  3. Étape trois

Liste de tâches

  • Tâche terminée
  • Tâche en cours
  • Tâche à faire

Code et coloration syntaxique

Un bloc de code Python avec numéros de ligne et ligne mise en évidence :

1
2
3
4
5
6

def saluer(nom):
    message = f"Bonjour, {nom} !"  # ligne mise en évidence
    print(message)
    return message

saluer("Ampo")

Un bloc shell sans numérotation :

hugo new posts/mon-article.md
hugo server -D

Tableaux

FonctionnalitéSupportéeNote
Markdown✅Via Goldmark
Coloration syntaxe✅Chroma
Table des matières✅ShowToc = true
Shortcodes✅Hugo + PaperMod

Images et figures

Avec le shortcode figure de PaperMod (image + légende) :

Logo Hugo

Le logo de Hugo, via le shortcode figure.

Contenu repliable

Avec le shortcode collapse de PaperMod :

Cliquez pour dérouler le détail

Ce contenu est masqué par défaut et s’affiche au clic.

On peut y mettre du Markdown : listes, code, etc.

Vidéo embarquée

Le shortcode intégré youtube de Hugo :

Notes de bas de page

Hugo gère les notes de bas de page Markdown1, pratique pour les références2.

Alertes / HTML brut

Pour insérer du HTML arbitraire (non rendu par défaut), on passe par le shortcode rawhtml :

ℹ️ Astuce : ce bloc est du HTML brut injecté via le shortcode rawhtml.

Mathématiques et plus

Et bien d’autres choses : émojis 🎉, abréviations, blocs de définition selon la config Goldmark… Hugo est très extensible.

  1. Voici le contenu de la première note. ↩︎

  2. Et une seconde note, avec un lien. ↩︎