J'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:

![name of the image](http://link.com/image.jpg)

Cela montre alors l'image dans le texte.

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

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.htmldans _includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

Et puis affichez l'image de votre démarque avec:

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

Je sais que c'est une vieille question, mais j'ai pensé que je partagerais toujours ma méthode d'ajout de légendes d'image. Vous ne pourrez pas utiliser les balises captionou figcaption, mais ce serait une alternative simple sans utiliser de plugins.

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

![](path_to_image)
*image_caption*

Cela générerait le code HTML suivant:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

Ensuite, dans votre CSS, vous pouvez le styliser à l'aide du sélecteur suivant sans interférer avec les autres embalises de la page:

img + em { }

Notez que vous ne devez pas avoir de ligne vide entre l'image et la légende car cela générerait à la place:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

Vous pouvez également utiliser la balise de votre choix autre que em. Assurez-vous simplement qu'il y a une balise, sinon vous ne pourrez pas la styliser.

Vous pouvez utiliser la table pour cela. Ça fonctionne bien.

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

Résultat:

Le code HTML correct à utiliser pour les images avec des légendes est <figure>avec<figcaption> .

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

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

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

La spécification Markdown vous encourage à incorporer 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 de Markdown-y (comme des tableaux, des astérisques, etc.) pour produire des légendes, vous ne faites que pirater la façon dont Markdown était censé être utilisé.

Un léger riff sur la réponse votée en haut que j'ai trouvé un peu plus explicite est d'utiliser la syntaxe jekyll pour ajouter une classe à quelque chose, puis le styliser de cette façon.

Donc, dans le post, vous auriez:

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

{:.image-caption}
*The caption for my image*

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

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

Sort bien!

Il existe deux solutions sémantiquement correctes à cette question:

1. Utiliser un plugin
2. Créer une inclusion personnalisée

1. Utilisation d'un plugin

J'ai essayé quelques plugins pour faire cela et mon préféré estjekyll-figure .

1.1. Installerjekyll-figure

Une façon d'installer jekyll-figureest d'ajouter gem "jekyll-figure"à votre Gemfile dans votre groupe de plugins.

Ensuite, exécutez à bundle installpartir de la fenêtre de votre terminal.

1.2. Utilisationjekyll-figure

Enveloppez simplement votre démarque {% figure %}et vos {% endfigure %}balises.

Votre légende va dans la {% figure %}balise d' ouverture , et vous pouvez même la styliser avec Markdown!

Exemple:

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3. Donnez du style

Maintenant que vos images et légendes sont sémantiquement correctes, vous pouvez appliquer le CSS comme vous le souhaitez:

• figure (pour l'image et la légende)
• figure img (pour l'image uniquement)
• figcaption (pour la légende seulement)

2. Création d'une inclusion personnalisée

Vous devrez créer un image.htmlfichier dans votre _includesdossier et l' inclure à l'aide de Liquid dans Markdown .

2.1. Créer _includes / image.html

Créez le image.htmldocument dans votre dossier _includes:

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2. Dans Markdown, incluez une image à l'aide de Liquid

Une image /assets/imagesavec une légende:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Une image (externe) utilisant une URL absolue: (remplacer src=""par srcabs="")

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Une image cliquable: (ajouter un url=""argument)

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Une image sans légende:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3. Donnez du style

Maintenant que vos images et légendes sont sémantiquement correctes, vous pouvez appliquer le CSS comme vous le souhaitez:

• figure (pour l'image et la légende)
• figure img (pour l'image uniquement)
• figcaption (pour la légende seulement)

Vous pouvez essayer de l'utiliser pandoccomme convertisseur. Voici un plugin jekyll pour implémenter cela. Pandoc pourra ajouter altautomatiquement une légende de figure identique à votre attribut.

Mais vous devez pousser le site compilé car github n'autorise pas les plugins dans les pages Github pour des raisons de sécurité.

La réponse d'Andrew @ andrew-wei fonctionne très bien. Vous pouvez également en enchaîner quelques-uns, en fonction de ce que vous essayez de faire. Ceci, par exemple, vous donne une image avec alt, titre et légende avec un saut de ligne et gras et italique dans différentes parties de la légende:

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

Avec la <img>démarque suivante :

![description](https://img.jpg "description")
***Image:*** *description*

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

C'est l'utilisation de base des légendes. Pas nécessaire d'utiliser un plugin supplémentaire.

Voici la solution la plus simple (mais pas la plus jolie): faire une table autour du tout. Il y a évidemment des problèmes de mise à l'échelle, et c'est pourquoi je donne mon exemple avec le HTML afin que vous puissiez facilement modifier la taille de l'image. Cela a fonctionné pour moi.

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |