En utilisant une légende d'image dans Markdown Jekyll

Question

Je héberge un blog Jekyll sur Github et j'écris mes articles avec Markdown. Lorsque j'ajoute des images, je le fais de la manière suivante :

![nom de l'image](http://lien.com/image.jpg)

Cela affiche alors l'image dans le texte.

Cependant, comment puis-je dire à Markdown d'ajouter une légende qui est présentée en dessous ou au-dessus de l'image ?

Answer 1

Je sais que c'est une vieille question mais je voulais quand même partager ma méthode pour ajouter des légendes d'images. Vous ne pourrez pas utiliser les balises caption ou figcaption, mais voici une alternative simple sans utiliser de plugins.

Dans votre markdown, vous pouvez envelopper votre légende avec la balise d'accentuation et la placer directement sous l'image sans insérer de nouvelle ligne comme ceci:

![](chemin_vers_image)
*légende_de_l'image*

Cela générerait le HTML suivant:

    légende_de_l'image

Ensuite, dans votre CSS, vous pouvez le styliser en utilisant le sélecteur suivant sans interférer avec les autres balises em de la page:

img + em { }

Notez qu'il ne doit pas y avoir de ligne vide entre l'image et la légende car cela générerait plutôt:

    légende_de_l'image

Vous pouvez également utiliser n'importe quelle balise autre que em. Assurez-vous simplement qu'il y ait une balise, sinon vous ne pourrez pas le styliser.

Answer 2

Vous pouvez utiliser un tableau pour cela. Cela fonctionne bien.

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Espace* |

Résultat :

Answer 3

Si vous ne souhaitez pas utiliser de plugins (ce qui signifie que vous pouvez le pousser directement vers GitHub sans générer le site au préalable), vous pouvez créer un nouveau fichier nommé image.html dans _includes:

  {{ include.description }}

Ensuite, affichez l'image depuis votre markdown avec:

{% include image.html url="/images/my-cat.jpg" description="Mon chat, Robert Downey Jr." %}

Answer 4

Le HTML correct à utiliser pour les images avec des légendes est

avec

.

Il n'y a pas d'équivalent Markdown pour cela, donc si vous ajoutez seulement occasionnellement une légende, je vous encourage simplement à ajouter ce html dans votre document Markdown :

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

  C'est mon texte de légende.

Vestibulum eu vulputate magna...

La spécification Markdown vous encourage à intégrer du HTML dans des cas comme celui-ci, donc il s'affichera très bien. C'est aussi beaucoup plus simple que de jouer avec des plugins.

Si vous essayez d'utiliser d'autres fonctionnalités Markdown (comme les tableaux, les astérisques, etc.) pour produire des légendes, alors vous contournez simplement la façon dont Markdown a été conçu pour être utilisé.

Answer 5

Une légère variation sur la réponse la mieux notée que j'ai trouvée un peu plus explicite consiste à utiliser la syntaxe de Jekyll pour ajouter une classe à quelque chose et ensuite le styliser de cette manière.

Donc dans le post, vous auriez :

![Mon image](/images/my-image.png)

{:.image-caption}
*La légende de mon image*

Ensuite, dans votre fichier CSS, vous pouvez faire quelque chose comme ceci :

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: lightgrey;

Rendu final sympa !