[R Markdown] toc customizing :: R 마크다운 목차 커스터마이징

[R Markdown] 목차(TOC) 커스터마이징

R Markdown 에서 목차를 추가하는 방법은 간단하다.

---

title: "[R Markdown] TOC customizing"

output: 

  html_document :

    toc : true

---

.Rmd 파일 맨 위 output format에서 toc : true 를 추가해주면 된다.

예)

---
title: "[R Markdown] TOC customizing"
output: 
  html_document :
    toc : true
---
 
# First toc
***
 
```{r}
ex <- c(1,2,3)
```
 
***
 
# Second toc
***
 
two depth toc
 
## Second - 1 toc
```{r}
ex2 <- c(1,2,3)
```
 
### Second - 1 - 1 toc
 
three depth toc
 
***
 

<그림 1. 목차>

"#"으로 선언된 이름들이 맨 위에 목차가 되었음을 알 수 있다. 이 목차를 클릭하면 해당 위치로 이동한다.

# 부터 "#"이 하나 추가 될 때마다 하위목록으로 들어간다. 목차의 hierarchy를 쉽게 관리 할 수 있다.

---

toc 의 depth를 따로 지정 해 줄 수 있다.

---

title: "[R Markdown] TOC custormizing"

output: 

  html_document :

    toc : true

    toc_depth : 2

---

<그림 2. toc_depth : 2>

toc의 depth를 2로 지정해 주었기 때문에 ### Second - 1 - 1 toc 는 목차로 지정되지 않았다.

(###는 depth가 3이기 때문이다.)

---

toc이 길어질 경우 맨 위에 위치하는 것보다 옆에 위치하는 것이 더 좋을 수 있다. toc_float: true 로 custom 할 수 있다.

이렇게 하면 스크롤을 내려도 목차도 함께 내려온다.

---

title: "[R Markdown] TOC custormizing"

output: 

  html_document :

    toc : true

    toc_float: true

---

<그림 3. toc_float : true>

<그림 4. 하위 목차>

하위 목차는 숨겨져 있다가 상위 목차를 클릭하면 보인다.

---

목차의 위치도 변경 할 수 있다. <style> ~ </style> 에서 %로 위에서 얼마나 떨어져 위치하면 좋을지 넣어주면 된다.

---

title: "[R Markdown] TOC custormizing"

output: 

  html_document :

    toc : true

    toc_float: true

---

<style>

#TOC {

  top: 20%;

}

</style>

<그림 5. top : 20%>

위 그림 3에 비해 아래에 위치한 것을 볼 수 있다.

---

목차의 투명도를 설정하는 방법은 <style> ~ </style> 에서 opacity 로 지정한다.

0~1 사이값으로 지정하며, 0이 가장 연하게, 1이 가장 진하게 이다.

---

title: "[R Markdown] TOC custormizing"

output: 

  html_document :

    toc : true

    toc_float: true

---

<style>

#TOC {

  top: 20%;

  opacity: 0.5;

}

<그림 6. opacity : 0.5>

---

평소에는 연하게 있다가, 마우스를 가져다 대면 다시 진하게 하는 방법은 역시나 <style> ~ </style> 에서 지정한다.

<style>

#TOC {

  top: 20%;

  opacity: 0.5;

}

#TOC:hover {

  opacity: 1;

}

</style>

                        

<그림 7. TOC : hover>

---

목차의 글자색, 배경색, 경계색을 변경하는 방법은 다음과 같다. <style> ~ </style> 안 에서 다음과 같이 지정한다.

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {

    background-color: pink;

    color : red;

    border-color: gray;

}

<그림 8. color customizing>