[Github Blog] Jekyll 마크다운 이미지 캡션 달기

환경: Github Pages, Jekyll, minimal-mistakes 테마

블로그 포스팅 시 이미지에 캡션을 달고 싶은데 마크다운 문법으로는 불가능했다. 그러던 중 이에 관한 레퍼런스를 발견했고, 내 블로그에 적용했다.

📍 마크다운 이미지에 캡션 달기

![](path_to_image)
*image_caption*

이렇게 마크다운을 작성하게 되면

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

이런 모습으로 HTML이 생성된다. 여기서 추가로 ‘캡션’ 답게 css를 설정해 줘야 한다.

css 위치는 크게 중요하지 않을 것 같은데, 나는 _base.scss에 넣어줬다. (minimal-mistakes 테마)

📃 _base.scss

img + em {
  display: block;
  text-align: center;
  font-size: .8rem;
  color: light-grey;
}

✨ 적용 된 모습

이렇게 달린다.

참고로 중앙 정렬을 위해

![](path_to_image){: .align-center}
*image_caption*

이런 식으로 써줘도 캡션이 잘 달린다. 위의 이미지도 그렇게 작성했다.

---

블로그에 적용한 변경 사항은 25c08e9 에서 확인 하실 수 있습니다!

그럼 다들 즐거운 포스팅 하시길 바라며 이만 마치겠습니다🙇‍♀️💕

카카오페이로 커피사기 ❤️ 토스,계좌로 커피사기 ❤️