마크다운으로 토글 기능을 쓸 수 있을까?

1. 결론

일단 쓸 수는 있다. 
 
간혹 README 등 마크다운을 활용해 문서를 작성하다 보면, 덜 핵심적인 내용이나 이미지들을 접어두고 싶을 때가 있다. 마치 노션의 토글기능처럼 접었다 폈다 하는 기능 말이다. 
 
엄밀히 말하자면, 마크다운에서는 토글 기능을 지원하지 않으나 html의 <details> 태그를 사용하면 사용할 수 있다. 
 

2. 사용 방법

아래와 같이 입력하면 된다. <details> 태그 사이에는 토글 삼각형 옆의 텍스트를 나타낼 <summary> 태그를 사용한다. 더불어, html 사이의 markdown을 인식하기 위한 코드로 <div markdown = "1">라는 것을 꼭 넣어 주어야 한다고 한다.

<details>
<summary>토글 접기/펼치기</summary>
<div markdown="1">

텍스트 , 이미지 등등 입력

</div>
</details>

그럼 아래와 같이 나타난다.

▶ 토글 접기/펼치기

 

3. 의문점

<div markdown = "1">을 꼭 넣어주어야 할까? 실험을 해보았다.
 
1. 넣은 버전: 토글이 IDE 미리보기와 Github 모두 잘 나타난다.

2. 넣지 않은 버전: 토글이 IDE 미리보기와 Github 모두 잘 나타난다.