자동 목차에 제목4(h4) 추가

HTML

위를 아래와 같게 수정

// 목차 생성
    $(document).ready(function() {
    $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3"});
    });

// 목차 생성
    $(document).ready(function() {
    $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4,h5"});
    });

 

 

{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }

 

{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3", "pl-8": heading.tagName === "H4" }

 

CSS

위를 아래와 같게 수정

#shortcutLayer h2,
#shortcutLayer h3{

  font-weight: 700
}

#shortcutLayer h2,
#shortcutLayer h3,
#shortcutLayer h4 {

  font-weight: 700
}

 

 

.dark #shortcutLayer h2,
.dark #shortcutLayer h3,
.dark #shortcutLayer th,
.dark #shortcutLayer td,
.dark #shortcutLayer p {

  --tw-border-opacity: 1;

  border-color: rgb(53 54 56 / var(--tw-border-opacity));

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

 

.dark #shortcutLayer h2,
.dark #shortcutLayer h3,
.dark #shortcutLayer h4,
.dark #shortcutLayer th,
.dark #shortcutLayer td,
.dark #shortcutLayer p {

  --tw-border-opacity: 1;

  border-color: rgb(53 54 56 / var(--tw-border-opacity));

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

 

 

#article .contents_style h2,
#article .contents_style h3 {

  margin-top: 1.25rem;

  margin-bottom: 1.25rem;

  scroll-margin-top: 5rem;

  font-weight: 500
}

#article .contents_style h2 a,
#article .contents_style h3 a {

  --tw-text-opacity: 1;

  color: rgb(53 54 56 / var(--tw-text-opacity))
}

.dark #article .contents_style h2 a,
.dark #article .contents_style h3 a {

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

 

#article .contents_style h2,
#article .contents_style h3,
#article .contents_style h4 {

  margin-top: 1.25rem;

  margin-bottom: 1.25rem;

  scroll-margin-top: 5rem;

  font-weight: 500
}

#article .contents_style h2 a,
#article .contents_style h3 a,
#article .contents_style h4 a {

  --tw-text-opacity: 1;

  color: rgb(53 54 56 / var(--tw-text-opacity))
}

.dark #article .contents_style h2 a,
.dark #article .contents_style h3 a,
.dark #article .contents_style h4 a {

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

 

이것을 추가

#article .contents_style h4 {

  font-size: 1rem;

  line-height: 1.5rem
}

@media (min-width: 1100px) {

  #article .contents_style h4 {

    font-size: 1.125rem;

    line-height: 1.75rem
  }
}