jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트

목표

티스토리가 마크다운을 공식적으로 지원함에 따라 티스토리 블로거들은 마크다운을 사용하기 위해 스킨을 만져 showdown.js를 불러오는 등의 고생을 할 필요가 없어졌습니다. 다만 공식적으로 지원하는 기능에 뭔가 부족함을 느낀다면 직접 만들어야죠.

제 경우에는 목차가 필요하다 느꼈습니다.

# h1 제목
## h2 제목
### h3 제목

이렇게 소제목을 쓰면 포스트 최상단에,

* 1 h1 제목
* 1.1 h2 제목
* 1.1.1 h3 제목

이런 방식으로 나오도록 만들어 보고자 했습니다. 내부 링크를 만들 때는 URL에서부터 어디를 가리키는지 명확하게 알 수 있도록 만들었습니다.

스크립트

작동 방식은 주석을 참고하시기 바랍니다.

var HSelector = "h1"; // 소제목 선택자
// var HSelector = "h1, h2, h3"; // 3단계까지 선택하는 경우
$('.entry-content').each((i1, content) => {
  // class="entry-content"는 티스토리의 포스트 내용이 들어가는 박스
  let $toc = $('<ul class="markdown-toc"></ul>');
  // $toc는 목차가 들어갈 ul 박스
  let i1 = 0; let i2 = 0; let i3 = 0;
  // 각 단계별 번호
  $(content)
    .find(HSelector)
    .each((i, h) => {
      let label = $(h).text();
      switch ($(h).prop("tagName")) {
        // 주의: $.prop("tagName")으로 얻은 태그명은 항상 대문자
        case "H1":
          i1++;
          i2 = 0; i3 = 0; // 하위 수준 초기화
          let href = encodeURIComponent(`s${i1}-${label}`);
          // 내부 링크는 "s1-소제목" 형식
          $toc.append(`<li><a href="#${href}">${i1} ${label}</a></li>`);
          // 목차에 링크 추가
          break;
        case "H2":
          i2++;
          i3 = 0;
          href = encodeURIComponent(`s${i1}-${i2}-${label}`);
          // 내부 링크는 "s1-1-소제목" 형식
          $toc.append(`<li><a href="#${href}">${i1}.${i2} ${label}</a></li>`);
          break;
        case "H3":
          i3++;
          href = encodeURIComponent(`s${i1}-${i2}-${i3}-${label}`);
          // 내부 링크는 "s1-1-1-소제목" 형식
          $toc.append(`<li><a href="#${href}">${i1}.${i2}.${i3} ${label}</a></li>`);
          break;
      }
      $(h).attr("id", `${href}`);
      // 해당 소제목 요소의 id 속성을 목차 링크와 맞도록 조정.
    });
  $(content).prepend($toc);
  // 목차를 포스트 최상단에 붙임
});

추가로 고민할 것

페이지가 로드된 상테에서 목차를 누르면 정상적으로 작동합니다. 그러나, 소제목까지 들어있는 URL을 받아 외부에서 접속했을 때는 정삭적으로 작동하지 않습니다. 이 문제는 $.scrollTop()을 이용해서 손쉽게 해결할 수 있습니다.