Mettre en évidence du contenu

Bug connu

Les blocs de citation et les admonitions souffrent parfois de problèmes d’affichage lors de rechargement à chaud (hot reload) pendant le développement de votre page. Si vous constatez des problèmes d’affichage, comme dans l’exemple ci-dessous, redémarrer le serveur de développement Hugo résoudra le problème.
Ce probème ne se produira pas une fois votre page déployée sur le site principal.

Exemple de problèmes d’affichage après plusieurs rechargements à chaud

Blocs de citation

Les éléments blockquote représentent le contenu qui est cité à partir d’une autre source, éventuellement avec une citation qui doit être dans un élément footer ou cite.

Code :

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Notez** que vous pouvez utiliser la *syntaxe Markdown* à l'intérieur d'un bloc de citation.  
> — *Dark Vador*

Résultat :

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Notez que vous pouvez utiliser la syntaxe Markdown à l’intérieur d’un bloc de citation.
— Dark Vador

Code :

> Ceci est un bloc de citation.
> > Ceci est un bloc de citation imbriqué.
> > > Ceci est un bloc de citation imbriqué dans un bloc de citation imbriqué.

Résultat :

Ceci est un bloc de citation.

Ceci est un bloc de citation imbriqué.

Ceci est un bloc de citation imbriqué dans un bloc de citation imbriqué.

Admonitions

Les admonitions sont souvent utilisées pour améliorer la lisibilité et l’organisation du contenu en mettant en évidence des sections clés.
Elles sont créées en utilisant la syntaxe des blocs de citation, auquelles on ajoute un type d’admonition spécifique en utilisant la syntaxe suivante : > [!TYPE] suivi du contenu de l’admonition. Les valeurs possibles pour TYPE sont décrites plus bas.

Admonitions GitHub

Les admonitions supportées par GitHub le sont aussi sur ce site.

Code :

> [!NOTE]
> Information utile que les utilisateurs doivent connaître, même en lecture rapide.

> [!TIP]
> Conseil pratique pour faire les choses plus efficacement ou plus facilement.

> [!IMPORTANT]
> Information clé à connaître pour atteindre l’objectif.

> [!WARNING]
> Information urgente qui nécessite une attention immédiate pour éviter des problèmes.

> [!CAUTION]
> Avertit sur les risques ou les conséquences négatives de certaines actions.

Résultat :

Personnalisation

Il est possible de changer le titre par défaut des admonitions.

Code :

> [!INFO] Point culture
> Admonition `INFO` avec un titre personnalisé.

> [!IDEA] Une idée géniale !
> Admonition `IDEA` avec un titre personnalisé.

Résultat :

Mode en-tête uniquement

Il est possible de d’afficher que l’en tête de l’admonition en ne mettant pas de contenu de l’admonition.

Code :

> [!ABSTRACT] Cet article présente les avantages de l’architecture microservices

> [!CAUTION] Assurez-vous que tous les tests passent avant de fusionner vers la branche principale

> [!CODE] Exécutez `npm install` pour installer toutes les dépendances

Résultat :

Mode sans en-tête

Vous pouvez aussi afficher uniquement le contenu enmettant un titre vide (guillemets doubles ou simples) :

Code :

> [!TIP] ""
> Ceci est un callout sans en-tête.

> [!INFO] ''
> Vous pouvez utiliser n’importe quel type de callout, mais l’en-tête sera masqué.

Résultat :

Admonitions repliables

Enfin, vous pouvez rendre les admonitions repliables en ajoutant un tiret - juste après le type de l’admonition. Exemple : > [!TIP]- pour une admonition de type TIP repliable.

Code :

> [!SUCCESS]- Afficher la réponse
> - **Solution** : 2
> - **Détail** : 1 + 1 = 2

Résultat :

Admonitions imbriquées

Code :

> [!QUESTION] Les admonitions peuvent-elles être imbriquées ?
> > [!INFO] Oui, tout à fait.
> > > [!EXAMPLE] Vous pouvez même utiliser plusieurs niveaux d’imbrication.

Résultat :

Liste complète des admonitions

• > [!ABSTRACT]

• > [!CAUTION]

• > [!CODE]

function fetchData() {
    return axios.get('/api/data');
}

• > [!CONCLUSION]

• > [!DANGER]

• > [!ERROR]

• > [!EXAMPLE]

def hello_world():
    print("Hello, World!")

• > [!EXPERIMENT]

• > [!GOAL]

• > [!IDEA]

• > [!IMPORTANT]

• > [!INFO]

• > [!MEMO]

• > [!NOTE]

• > [!NOTIFY]

• > [!QUESTION]

• > [!QUOTE]

• > [!SUCCESS]

• > [!TASK]

• > [!TIP]

• > [!WARNING]