Я знаю, что это старый вопрос, но я думал, что все равно поделюсь своим методом добавления заголовков изображений. Вы не сможете использовать caption или figcaption теги, но это будет простая альтернатива без использования каких-либо плагинов.

в вашем markdown, вы можете обернуть свой заголовок с тегом акцент и поставить его непосредственно под изображением, не вставляя новую строку, как так:

![](path_to_image)
*image_caption*

это создаст следующий HTML:

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

затем в CSS вы можете стилизовать его с помощью следующего селектора, не вмешиваясь в другие em теги на странице:

img + em { }

обратите внимание, что вы не должны иметь пустую строку между изображением и заголовком, потому что вместо этого будет генерировать:

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

вы также можете использовать любой тег, который вы хотите, кроме em. Просто убедитесь, что есть тег, иначе вы не сможете его стилизовать.

вы можете использовать таблицу для этого. Он отлично работает.

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

результат:

Если вы только добавляете случайный заголовок, и вы хотите использовать больше смысловой<figure> и <figcaption> подумайте о том, чтобы просто добавить этот html в свой документ 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...

Это намного проще, чем возиться с плагинами и Markdown поощряет встраивание HTML, так что он будет отображать нормально.

вы можете попробовать использовать pandoc как ваш конвертер. вот плагин jekyll для реализации этого. Pandoc сможет добавить подпись к рисунку так же, как и ваш alt автоматически атрибута.

но вы должны нажать скомпилированный сайт, потому что github не разрешает плагины на страницах Github для обеспечения безопасности.

небольшой рифф на топ проголосовал за ответ что я нашел, чтобы быть немного более явным, чтобы использовать синтаксис jekyll для добавления класса к чему-то, а затем стиль его таким образом.

Так что в посте у вас будет:

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

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

и тогда в вашем CSS файле вы можете сделать что-то вроде этого:

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

выходит хорошо выглядит!

Андрей @Андрей-Вэй ответ Отлично работает. Вы также можете связать несколько вместе, в зависимости от того, что вы пытаетесь сделать. Это, например, дает вам изображение с alt, заголовком и заголовком с разрывом строки и полужирным шрифтом и курсивом в разных частях заголовка:

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

следующим <img> markdown:

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

вот самое простое (но не самое красивое) решение: сделайте таблицу вокруг всего этого. Очевидно, что есть проблемы с масштабированием, и именно поэтому я приведу свой пример с HTML, чтобы вы могли легко изменить размер изображения. Это сработало для меня.

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

есть два семантически правильных решения этого вопроса:

1. С помощью плагина
2. создание пользовательского include

1. С помощью плагина

я пробовал пару плагинов делать это и мой фаворит -jekyll-figure.

1.1. Установить jekyll-figure

один из способов установить jekyll-figure добавить gem "jekyll-figure" к вашему Gemfile в вашей группе плагинов.

затем запустите bundle install из окна терминала.

1.2. Используйте jekyll-figure

просто оберните свою уценку в {% figure %} и {% endfigure %} теги.

вы подпись идет в открытие {% figure %} тег, и вы даже можете стиль его с уценкой!

пример:

{% 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. Стиль его

теперь, когда ваши изображения и подписи семантически корректны, вы можете применить CSS, как вы хотите:

• figure (для изображение и подпись)
• figure img (на изображении только)
• figcaption (заголовок только)

2. Создание пользовательского include

вам потребуется создать в своем _includes папку и включить его с помощью жидкости в Markdown.

2.1. Создать _includes / image.HTML-код

создать image.html документ в папке _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. В Markdown, включить изображение с помощью жидкости

изображение /assets/images с надписью:

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

(внешнее) изображение с использованием абсолютного URL: (change src="" до 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 -->
%}

кликабельное изображение: (добавить