인용구(Blockquote)를 활용해서 중요한 정보를 강조할 수 있다. NOTE
, IMPORTANT
, WARNING
세 가지 타입을 지원하며, 각 타입에 해당하는 아이콘과 컬러로 자동 변경된다. 참고로 README.md 마크다운 편집기에선 미리보기(Preview)로 표시되지 않지만 저장 후엔 정상적으로 표시된다.
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
How to add a collapsible section in markdown.
Disclosure Widget은 작은 삼각형 아이콘을 사용해서 열림과 닫힘 상태를 표시한다. 이 아이콘을 클릭하면 위젯이 열리면서 숨겨져 있던 정보를 보여준다. 주로 FAQ 같은 추가 정보 인터페이스에서 자주 사용한다.
HTML에선 <details>
태그를 사용해서 이 기능을 구현할 수 있는데, GitHub 마크다운에서도 동일하게 사용할 수 있다. 위젯에 대한 레이블은 <summary>
요소를 사용한다. 원한다면 위젯 안에 또 다른 위젯을 중복해서 배치할 수도 있다.
<details>
<summary>More Information</summary>
<br /> <!-- 레이블과 본문 사이가 너무 좁은 것 같아서 줄바꿈 태그를 사용했다 -->
```js
console.log('hello')
</details>
![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/693bd179-c36e-4fed-a320-2adeccbac8da/50a6cea2-ffd4-47b7-ba84-5d02fb091978/Untitled.png>)
# Image Caption
---
GitHub 마크다운은 기본적으로 이미지 캡션을 지원하지 않지만, HTML을 사용해서 이미지 캡션을 추가할 수 있다. 아쉽게도 캡션에 추가적인 서식을 적용하는건 불가능하다. GitHub 마크다운 렌더러는 보안상의 이유로 여러 요소와 속성을 Sanitize 하기 때문에 인라인 스타일은 사용할 수 없다.
```markdown
<figure>
<img src="<https://images.unsplash.com/photo-1451187580459-43490279c0fa>" alt="Alternative text for image">
<figcaption>Caption goes here</figcaption>
</figure>