Admonition Box


[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925

인용구(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.

Untitled

Disclosure Widget


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>

Untitled

Table Of Contents (TOC)