결론
일단 쓸 수는 있다.
간혹 README 등 마크다운을 활용해 문서를 작성하다 보면, 덜 핵심적인 내용이나 이미지들을 접어두고 싶을 때가 있다. 마치 노션의 토글기능처럼 접었다 폈다 하는 기능 말이다.
엄밀히 말하자면, 마크다운에서는 토글 기능을 지원하지 않으나 html의 <details> 태그를 사용하면 사용할 수 있다.
사용 방법
아래와 같이 입력하면 된다. <details> 태그 사이에는 토글 삼각형 옆의 텍스트를 나타낼 <summary> 태그를 사용한다. 더불어, html 사이의 markdown을 인식하기 위한 코드로 <div markdown = "1">라는 것을 꼭 넣어 주어야 한다고 한다.
<details>
<summary>토글 접기/펼치기</summary>
<div markdown="1">
텍스트 , 이미지 등등 입력
</div>
</details>
HTML
복사
그럼 아래와 같이 나타난다.
토글 접기/펼치기
궁금증
<div markdown="1"> 태그를 사용하는 이유
<div markdown="1"> 태그를 사용하는 주된 이유는 마크다운 문법을 HTML 요소 내에서 활성화하기 위함이라고 한다. 일반적으로 마크다운 파서나 변환기가 HTML 태그 내부의 내용을 마크다운으로 해석하지 않기 때문이다.
예를 들어, <details> 태그 내부에 마크다운 문법을 사용하고 싶을 때, 단순히 마크다운 문법을 쓴다고 해서 그대로 해석되지 않는다. 이때 <div markdown="1"> 태그를 사용하면, 이 태그 내부에 있는 내용은 마크다운으로 처리되어야 함을 명시한다.
그러나 모든 마크다운 파서나 변환기가 <div markdown="1">을 인식하거나 필요로 하지는 않는다고 한다. 일부 도구에서는 이를 명시하지 않아도 HTML 내부의 마크다운 문법을 자동으로 인식하고 처리할 수 있다. 따라서 실제로 이 태그를 사용할 필요가 있는지는 사용하는 도구나 환경에 따라 다를 수 있기에 필수는 아니다.
그래서 직접 실험을 해보았다.
1. 넣은 버전
토글이 IDE 미리보기와 Github 모두 잘 나타난다.
2. 넣지 않은 버전
역시 토글이 IDE 미리보기와 Github 모두 잘 나타난다.
내가 테스트한 환경에서는 붙여도, 붙이지 않아도 상관은 없지만 혹시 다른 환경에서 마크다운 파서가 html 태그를 인식하지 못할 수도 있으니 항상 붙여주는 것이 좋겠다.