마크다운 글접기

detail 태그

• 사용자가 열고 닫을 수 있는 컨텐츠(접힐 수 있는 섹션)를 정의하는 태그
• 추가 정보나 세부 정보를 제공하는데 사용된다

detail 태그를 사요하기 위해서는 summary 태그를 알아야한다

summary 태그

• detail 태그로 생성된 위젯의 접힌 상태에서 보이는 요약 정보를 제공
• 만약 summary태그가 없다면 브라우저는 자체적인 제목(“세부정보”)를 제공한다

---

마크다운은 접은글 기능을 지원하진 않지만, HTML 태그를 함께 사용해서 구현할 수 있었다.

• summary 태그는 줄바꿈 없이 <details> 바로 다음에 와야 한다
• </summary> 다음에는 빈 줄이여야한다
• 그 뒤에 오는 코드블록(```언어) 이 내용으로 접힌다

아래와 같이 접은글을 작성해보았다.

  <details>
  <summary>정답</summary>

```sql
CREATE TABLE student (
  id CHAR(5) PRIMARY KEY,
  name CHAR(10),
  sex CHAR(1),
  CONSTRAINT sex_ck CHECK (sex IN ('f', 'm')),
  CONSTRAINT id_fk FOREIGN KEY (id) REFERENCES teacher(teacher_id)
);
```

</details>

하지만 jekyll에서 아래처럼 details 태그안의 코드블록이 제대로 렌더링되지 않고 문자열로만 보이는 현상이 발생했다.

```sql
CREATE TABLE student (
  id CHAR(5) PRIMARY KEY, name CHAR(10), sex CHAR(1),
  CONSTRAINT sex_ck CHECK (sex IN ('f', 'm')),
  CONSTRAINT id_fk FOREIGN KEY (id) REFERENCES teacher(teacher_id) );
```

Jekyll은 내부적으로 Liquid 템플릿 엔진을 사용하기 때문에, HTML 태그와 코드블록(```)이 섞이면 의도한 대로 마크다운을 렌더링하지 못한다.
특히 details 태그 내부에서 코드블럭을 쓰면 깨진다.

✅ 해결 방법 (Jekyll-friendly)

내가 사용하는 minimal-mistakes는 markdown: kramdown 으로 되어있다.
Jekyll의 kramdown 기본 설정에선 details 태그 안에 있는 마크다운을 렌더링하지 않고 그냥 문자열로 처리된다.

방법1 : config.yml 수정

kramdown에서 HTML 안 마크다운을 허용하기위해서는 \_config.yml에 설정 추가하면 된다.

kramdown:
  parse_block_html: true

이렇게 하면 details태그 안의 마크다운도 파싱되어 구문강조가 적용된다.

방법2 : pre 태그 사용하기

아래처럼 <pre><code> 태그를 사용해서 직접 감싸는 방식으로 바꾸면 해결된다.

<details>
<summary>정답</summary>
<pre><code class="code-block">
CREATE TABLE student (
  id CHAR(5) PRIMARY KEY,
  name CHAR(10),
  sex CHAR(1),
  CONSTRAINT sex_ck CHECK (sex IN ('f', 'm')),
  CONSTRAINT id_fk FOREIGN KEY (id) REFERENCES teacher(teacher_id)
);
</code></pre>
</details>

아래처럼 잘 뜨는것을 확인

하지만 하이라이트가 적용되지않아서 눈에띄도록 배경색과 글자색을 변경하였다

pre code.code-block {
  background-color: #f9f2f4;
  color: #c7254e;
  display: block;
  padding: 1em;
  border-radius: 4px;
}

---

📝 정리

이제까지 details 태그를 몰랐을때는 JavaScript를 사용하여 동적으로 생성해서 업데이트 하는 방식으로 구현했었다.
하지만 이미 브라우저에서 그 기능을 제공하고있었다.
더 많은 태그들을 알고있었다면 js 코드를 줄이고, 시간을 더 줄일 수 있었을텐데 조금 아쉽다.