Markdown의 Shortcodes
Shortcodes는 완전한 HTML이나 JavaScript 코드를 작성하지 않고도 Markdown 문서에 복잡한 기능을 포함할 수 있는 특별한 구문입니다.
Shortcodes란?
Shortcodes는 정적 사이트 생성기(Hugo, Jekyll, Gatsby 등)가 제공하는 짧은 코드 조각으로, Markdown에서 미리 정의된 기능이나 컴포넌트를 호출할 수 있습니다.
기본 구문
플랫폼에 따라 shortcode 구문이 약간 다릅니다:
Hugo
markdown
{{< shortcode-name param1="value1" >}}Jekyll
markdown
{% shortcode_name param1='value1' %}Docusaurus / MDX
markdown
<ShortcodeName param1="value1" />일반적인 Shortcodes
이미지 및 미디어
동영상 삽입
markdown
{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}경고 박스
markdown
{{< note >}}
이것은 참고 정보입니다.
{{< /note >}}
{{< warning >}}
이것은 경고 정보입니다.
{{< /warning >}}탭
markdown
{{< tabs >}}
{{< tab "탭 1" >}}
탭 1의 내용입니다.
{{< /tab >}}
{{< tab "탭 2" >}}
탭 2의 내용입니다.
{{< /tab >}}
{{< /tabs >}}사용자 정의 Shortcodes 만들기
Hugo 사용자 정의 Shortcode
layouts/shortcodes/highlight-box.html:
html
<div class="highlight-box">
{{ .Inner | markdownify }}
</div>사용법:
markdown
{{< highlight-box >}}
이것은 **중요한** 내용입니다.
{{< /highlight-box >}}모범 사례
1. 간결하게 유지
markdown
# 좋음: 간결하고 명확
{{< note >}}
중요한 참고사항
{{< /note >}}
# 피하기: 지나치게 복잡
{{< container type="note" style="background:blue;padding:20px" >}}
중요한 참고사항
{{< /container >}}2. 명확한 매개변수 제공
markdown
# 좋음: 명확한 매개변수 이름
{{< video src="video.mp4" poster="thumbnail.jpg" width="800" >}}
# 피하기: 모호한 매개변수
{{< video "video.mp4" "thumbnail.jpg" "800" >}}결론
Shortcodes는 Markdown 기능을 확장하는 강력한 도구입니다. 콘텐츠의 가독성을 유지하면서 풍부한 인터랙티브 기능을 추가할 수 있습니다.