Estou hospedando um Blog Jekyll no Github e escrevo minhas postagens com Markdown. Quando adiciono imagens, faço da seguinte maneira:

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

Isso mostra a imagem no texto.

No entanto, como posso dizer ao Markdown para adicionar uma legenda que é apresentada abaixo ou acima da imagem?

Se você não quiser usar qualquer plugins (o que significa que você pode empurrá-lo para GitHub diretamente sem gerar o site pela primeira vez), você pode criar um novo arquivo chamado image.htmlem _includes:

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

E, em seguida, exiba a imagem da sua marcação com:

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

Sei que essa é uma pergunta antiga, mas pensei em compartilhar meu método de adicionar legendas à imagem. Você não poderá usar as tags captionou figcaption, mas essa seria uma alternativa simples sem o uso de plugins.

Na sua marcação, você pode agrupar sua legenda com a tag de ênfase e colocá-la diretamente abaixo da imagem sem inserir uma nova linha da seguinte forma:

![](path_to_image)
*image_caption*

Isso geraria o seguinte HTML:

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

Em seu CSS, você pode estilizá-lo usando o seguinte seletor sem interferir com outras emtags da página:

img + em { }

Observe que você não deve ter uma linha em branco entre a imagem e a legenda, pois isso geraria:

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

Você também pode usar qualquer tag que você queira que não seja em. Apenas verifique se há uma tag, caso contrário você não poderá estilizá-la.

Você pode usar tabela para isso. Funciona bem.

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

Resultado:

O HTML correto a ser usado para imagens com legendas é <figure>com<figcaption> .

Não há um equivalente do Markdown para isso; portanto, se você estiver adicionando apenas uma legenda ocasional, recomendamos que você adicione esse html ao seu documento do 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...

A especificação Markdown incentiva você a incorporar HTML em casos como esse, para que seja exibido corretamente. Também é muito mais simples do que mexer com plugins.

Se você estiver tentando usar outros recursos do Markdown-y (como tabelas, asteriscos, etc.) para produzir legendas, estará apenas pesquisando como o Markdown deveria ser usado.

Um pequeno riff na resposta votada que achei um pouco mais explícita é usar a sintaxe jekyll para adicionar uma classe a alguma coisa e depois estilizá-la dessa maneira.

Então, no post você teria:

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

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

E então, no seu arquivo CSS, você pode fazer algo assim:

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

Sai com boa aparência!

Existem duas soluções semanticamente corretas para essa pergunta:

1. Usando um plugin
2. Criando uma Inclusão Customizada

1. Usando um plugin

Eu tentei alguns plugins fazendo isso e o meu favorito éjekyll-figure .

1.1 Instalarjekyll-figure

Uma maneira de instalar jekyll-figureé adicionargem "jekyll-figure" ao seu Gemfile no seu grupo de plugins.

Então corra bundle install partir da janela do seu terminal.

1.2 Usarjekyll-figure

Basta envolver sua remarcação {% figure %}e{% endfigure %} tags.

Você legenda vai na abertura {% figure %} tag de , e você pode até estilizá-la com descontos!

Exemplo:

{% 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 Modelá-lo

Agora que suas imagens e legendas estão semanticamente corretas, você pode aplicar CSS conforme desejar:

• figure (para imagem e legenda)
• figure img (apenas para imagem)
• figcaption (apenas para legenda)

2. Criando uma Inclusão Customizada

Você precisará criar um image.htmlarquivo em sua _includespasta e incluí-lo usando Liquid no Markdown .

2.1 Crie _includes / image.html

Crie o image.htmldocumento na sua pasta _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 No Markdown, inclua uma imagem usando Liquid

Uma imagem /assets/imagescom uma legenda:

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 -->
%}

Uma imagem (externa) usando um URL absoluto: (mude src=""para 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 -->
%}

Uma imagem clicável: (adicionar url=""argumento)

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 -->
%}

Uma imagem sem legenda:

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 Modelá-lo

Agora que suas imagens e legendas estão semanticamente corretas, você pode aplicar CSS conforme desejar:

• figure (para imagem e legenda)
• figure img (apenas para imagem)
• figcaption (apenas para legenda)

Você pode tentar usar pandoccomo seu conversor. Aqui está um plugin jekyll para implementar isso. O Pandoc poderá adicionar altautomaticamente uma legenda à figura como seu atributo.

Mas você precisa enviar o site compilado porque o github não permite plugins nas páginas do Github por segurança.

A resposta de Andrew-andrew-wei funciona muito bem. Você também pode encadear alguns, dependendo do que você está tentando fazer. Por exemplo, você obtém uma imagem com alt, título e legenda com uma quebra de linha e negrito e itálico em diferentes partes da legenda:

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;}

Com a seguinte <img>remarcação:

![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>

Esse é o uso básico da legenda. Não é necessário usar um plug-in extra.

Aqui está a solução mais simples (mas não a mais bonita): faça uma mesa em torno da coisa toda. Obviamente, há problemas de dimensionamento, e é por isso que dou meu exemplo com o HTML para que você possa modificar o tamanho da imagem facilmente. Isso funcionou para mim.

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