TOC (table of Contents)를 멋있게.. #2 > 자유게시판

이전글 https://www.apachezone.com/free/3349  에서 2단계만 되어서...

마크다운의 6단계를 다 지원할려고 하니 예외적인 것을 체크해 봐야겠네요. (딱 정해진 두단계만 했는지 알겠네요. ㅎㅎ)

읽어오는 헤딩 값은 아래오 같습니다.

index, headingNo, Value
0 2 가이드
1 2 문법 가이드
2 3 일반 내용
3 3 멘션 사용자
4 3 이모티콘
5 4 일부 표현 예
6 3 제목 3
7 4 제목 4
8 5 제목 5
9 6 제목 6
10 3 사진
11 3 코드 블록
12 4 보통
13 4 구문 강조 지원
14 5 Go 코드 강조
15 5 Java 코드 강조
16 3 순서 없는/순서 있는 목록
17 4 순서 없는 목록
18 4 순서 있는 목록
19 4 체크 박스
20 3 테이블
21 3 세부 사항 숨기기
22 3 단락
23 3 링크 참조
24 3 수학 공식
25 3 마인드 맵
26 3 플로우 차트
27 3 타이밍 다이어그램
28 3 간트 차트
29 3 차트
30 3 악보 (abcjs)
31 3 Graphviz
32 3 멀티미디어
33 3 각주
34 2 바로 가기

이것을 대략 ul과 li를 사용해서 아래와 같이 변경을 해야 됩니다.

<ul>
    <li>2 가이드</li>
    <li>2 문법 가이드</li>
        <ul>
            <li>3 일반 내용</li>
            <li>3 멘션 사용자</li>
            <li>3 이모티콘</li>
                <ul>
                    <li>4 일부 표현 예</li>
                </ul>
            <li>3 제목 3</li>
                <ul>
                    <li>4 제목 4</li>
                        <ul>
                            <li>5 제목 5</li>
                                <ul>
                                    <li>6 제목 6</li>
                                </ul>
                        </ul>
                </ul>
            <li>3 사진</li>
            <li>3 코드 블록</li>
                <ul>
                    <li>4 보통</li>
                    <li>4 구문 강조 지원</li>
                        <ul>
                            <li>5 Go 코드 강조</li>
                            <li>5 Java 코드 강조</li>
                        </ul>
                </ul>
            <li>3 순서 없는/순서 있는 목록</li>
                <ul>
                    <li>4 순서 없는 목록</li>
                    <li>4 순서 있는 목록</li>
                    <li>4 체크 박스</li>
                </ul>
            <li>3 테이블</li>
            <li>3 세부 사항 숨기기</li>
            <li>3 단락</li>
            <li>3 링크 참조</li>
            <li>3 수학 공식</li>
            <li>3 마인드 맵</li>
            <li>3 플로우 차트</li>
            <li>3 타이밍 다이어그램</li>
            <li>3 간트 차트</li>
            <li>3 차트</li>
            <li>3 악보 (abcjs)</li>
            <li>3 Graphviz</li>
            <li>3 멀티미디어</li>
            <li>3 각주</li>
        </ul>
    <li>2 바로 가기</li>
</ul>

1. HeadingNo가 커질때에는 무리없이 집어 넣을 수 있는데.  headingNo가 작아질때,  훨씬 앞에 같은 레벨이 있는 경우 LI로 처리해야 되네요.

2. 시작은 heading2로 시작했는데,  실수로 중간에 heading1이 들어 갈 경우에는 이전에 앞에 레벨이 없으니 UL로 시작해야 될 것 같습니다.

얼떨결에 제대로 출력이 나온 것 같네요..

<ul class="nav navbar-nav">
  <ul class="nav navbar-nav">
    <li><a class="nav-link" href="#가이드_0">가이드</a></li>
    <li>
      <a class="nav-link" href="#문법-가이드_3">문법 가이드</a>
      <ul class="nav navbar-nav">
        <li><a class="nav-link" href="#일반-내용_4">일반 내용</a></li>
        <li><a class="nav-link" href="#멘션-사용자_7">멘션 사용자</a></li>
        <li>
          <a class="nav-link" href="#이모티콘_10">이모티콘</a>
          <ul class="nav navbar-nav">
            <li>
              <a class="nav-link" href="#일부-표현-예_12">일부 표현 예</a>
            </li>
          </ul>
        </li>
        <li>
          <a class="nav-link" href="#제목-3_14">제목 3</a>
          <ul class="nav navbar-nav">
            <li>
              <a class="nav-link" href="#제목-4_17">제목 4</a>
              <ul class="nav navbar-nav">
                <li>
                  <a class="nav-link" href="#제목-5_18">제목 5</a>
                  <ul class="nav navbar-nav">
                    <li><a class="nav-link" href="#제목-6_19">제목 6</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a class="nav-link" href="#사진_20">사진</a></li>
        <li>
          <a class="nav-link" href="#코드-블록_23">코드 블록</a>
          <ul class="nav navbar-nav">
            <li><a class="nav-link" href="#보통_24">보통</a></li>
            <li>
              <a class="nav-link" href="#구문-강조-지원_26">구문 강조 지원</a>
              <ul class="nav navbar-nav">
                <li>
                  <a class="nav-link" href="#Go-코드-강조_28">Go 코드 강조</a>
                </li>
                <li>
                  <a class="nav-link" href="#Java-코드-강조_30">Java 코드 강조</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a class="nav-link" href="#순서-없는-순서-있는-목록_33">순서 없는/순서 있는 목록</a>
          <ul class="nav navbar-nav">
            <li>
              <a class="nav-link" href="#순서-없는-목록_34">순서 없는 목록</a>
            </li>
            <li>
              <a class="nav-link" href="#순서-있는-목록_36">순서 있는 목록</a>
            </li>
            <li><a class="nav-link" href="#체크-박스_38">체크 박스</a></li>
          </ul>
        </li>
        <li><a class="nav-link" href="#테이블_40">테이블</a></li>
        <li>
          <a class="nav-link" href="#세부-사항-숨기기_43">세부 사항 숨기기</a>
        </li>
        <li><a class="nav-link" href="#단락_45">단락</a></li>
        <li><a class="nav-link" href="#링크-참조_48">링크 참조</a></li>
        <li><a class="nav-link" href="#수학-공식_51">수학 공식</a></li>
        <li><a class="nav-link" href="#마인드-맵_57">마인드 맵</a></li>
        <li><a class="nav-link" href="#플로우-차트_59">플로우 차트</a></li>
        <li>
          <a class="nav-link" href="#타이밍-다이어그램_61">타이밍 다이어그램</a>
        </li>
        <li><a class="nav-link" href="#간트-차트_63">간트 차트</a></li>
        <li><a class="nav-link" href="#차트_65">차트</a></li>
        <li><a class="nav-link" href="#악보--abcjs-_67">악보 (abcjs)</a></li>
        <li><a class="nav-link" href="#Graphviz_69">Graphviz</a></li>
        <li><a class="nav-link" href="#멀티미디어_71">멀티미디어</a></li>
        <li><a class="nav-link" href="#각주_74">각주</a></li>
      </ul>
    </li>
    <li><a class="nav-link" href="#바로-가기_77">바로 가기</a></li>
  </ul>
</ul>

첫번째에 <ul class="nav navbar-nav"> 가 두번 있는 것은 시작이 heading2부터 시작하는 것이라서..

다음은 CSS와 Javascript네요..