Github에서 Jekyll 블로그를 호스팅하고 Markdown으로 게시물을 작성합니다. 이미지를 추가 할 때 다음과 같이합니다.

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

그러면 텍스트에 이미지가 표시됩니다.

그러나 Markdown에게 이미지 아래 또는 위에 표시된 캡션을 추가하도록 지시하려면 어떻게해야합니까?

당신이 (당신이 직접 먼저 사이트를 생성하지 않고 GitHub의에 밀어 수있는 수단) 어떤 플러그인을 사용하지 않으려면, 당신은라는 이름의 새 파일을 만들 수 있습니다 image.html에를 _includes:

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

그런 다음 마크 다운에서 이미지를 다음과 같이 표시하십시오.

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

나는 이것이 오래된 질문이라는 것을 알고 있지만 이미지 캡션을 추가하는 방법을 여전히 공유한다고 생각했습니다. captionor figcaption태그 를 사용할 수는 없지만 플러그인을 사용하지 않고 간단한 대안이 될 수 있습니다.

마크 다운에서 강조 태그로 캡션을 감싸서 다음과 같이 새 줄을 삽입하지 않고 이미지 바로 아래에 배치 할 수 있습니다.

![](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은 입니다 .

이에 상응하는 마크 다운은 없으므로 가끔 캡션 만 추가하는 경우 해당 HTML을 마크 다운 문서에 추가하는 것이 좋습니다.

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을 포함하도록 권장 하므로 잘 표시됩니다. 또한 플러그인을 사용하는 것보다 훨씬 간단합니다.

캡션을 생성하기 위해 다른 Markdown-y 기능 (예 : 표, 별표 등)을 사용하려는 경우 Markdown의 사용 방식을 해킹하는 것입니다.

내가 좀 더 명백한 것으로 밝혀진 최상위 투표 답변 의 약간의 리프 는 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;

좋아 보인다!

이 질문에 대한 의미 론적으로 올바른 두 가지 해결책이 있습니다.

1. 플러그인 사용
2. 맞춤 포함 만들기

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. 사용자 정의 포함 만들기

당신은해야합니다 만들 image.html당신의 파일 _includes폴더를 , 그리고 마크 다운에 액체를 사용하여 포함한다 .

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. 마크 다운에서 액체를 사용하여 이미지를 포함

/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을 이용하여 (외부의) 화상 (변화 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 -->
%}

클릭 가능한 이미지 : ( url=""인수 추가 )

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

캡션이없는 이미지 :

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. 그것을 스타일

이제 이미지와 캡션이 의미 적으로 정확하므로 원하는대로 CSS를 적용 할 수 있습니다.

• figure (이미지와 캡션 모두)
• figure img (이미지 만 해당)
• figcaption (자막 만 해당)

pandoc변환기 로 사용하려고 할 수 있습니다 . 이것을 구현 하는 jekyll 플러그인 이 있습니다. Pandoc은 alt속성 과 동일한 그림 캡션을 자동으로 추가 할 수 있습니다 .

그러나 github은 보안을 위해 Github 페이지에서 플러그인을 허용하지 않기 때문에 컴파일 된 사이트를 푸시해야합니다.

Andrew의 @ andrew-wei 답변이 훌륭합니다. 수행하려는 작업에 따라 몇 개를 함께 연결할 수도 있습니다. 예를 들어, 자막의 다른 부분에 줄 바꿈과 굵은 체 및 기울임 꼴이있는 대체, 제목 및 캡션이있는 이미지를 얻을 수 있습니다.

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>마크 다운으로

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

이것이 기본 자막 사용입니다. 추가 플러그인을 사용할 필요는 없습니다.

가장 간단한 방법은 아니지만 가장 간단한 방법은 다음과 같습니다. 크기 조정 문제가 분명히 있기 때문에 이미지 크기를 쉽게 수정할 수 있도록 HTML로 예제를 제공하는 것입니다. 이것은 나를 위해 일했습니다.

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