R Markdown HTML 문서에서 목차의 색과 속성을 변경하는 방법은 무엇입니까?

Question

Google에서 과도한 시간을 보냈으며이를 파악하지 못했습니다.

R Markdown (docs here : http://rmarkdown.rstudio.com/html_document_format.html)을 사용하여 HTML 문서를 만들고 있습니다.

부동 한 목차의 색과 다른 속성을 변경하고 싶습니다. 가급적이면 Rmd 파일 자체에 포함 된 CSS를 통해이 작업을 수행하고 싶습니다.

--- 
title: "Untitled" 
output: 
    html_document: 
    keep_md: true 
    css: styles.css 
    toc: true 
    toc_float: true 
    number_sections: true 

--- 
<style type="text/css"> 
#TOC { 
    color: purple; 
} 

</style> 

출력은 다음과 같습니다 :

당신이 할 수있는 예를 들어, 난 이미 내 RMD 파일에 넣고 경우 TOC에 표시되는 텍스트의 색상을 변경할 수 있습니다 TOC 안에있는 텍스트가 이제 보라색으로 보입니다. 이 속성을 변경하는 데 사용할 수있는 다른 속성은 무엇입니까? 하이라이트 된 목차 섹션의 색상을 변경하려면 어떻게합니까?

이 대화 형 요소에 더 많은 사용자 지정을하고 싶습니다. 그러나이를 프로그래밍하는 방법에 대한 문서를 찾을 수없는 것 같습니다. {.tabset .tabset-pills}으로 얻을 수있는 탭 알약 버튼을 변경하는 것도 좋을 것입니다.

Answer 1

CSS를 통해 유동적 인 목차의 속성을 변경하려면 먼저 요소의 ID를 알아 내야합니다. 이렇게하는 쉬운 방법은 Chrome에서 HTML 파일을 열고 부동 TOC에서 강조 표시된 섹션을 마우스 오른쪽 버튼으로 클릭 한 다음 '검사'를 선택하여 개발자 콘솔을 여는 것입니다. 여기에서 '스타일'탭이 나타나야합니다.이 탭에는 현재 항목에 사용 된 CSS가 항목의 관련 ID와 함께 표시됩니다. background-color이 강조 TOC 요소의 색상을 의미, 여기

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { 
    z-index: 2; 
    color: #fff; 
    background-color: #337ab7; 
    border-color: #337ab7; 
} 

, 현재 (기본 블루 색상으로 설정 : 예를 들어

는 강조 TOC 요소의 기본 CSS는 다음과 같습니다 # 337ab7). 다른 색상으로 만들려면 Chrome에서 실제로 놀 수 있습니다. # 337ab7을 클릭하고 '자주색'을 입력 해보십시오. 변경 사항이 실시간으로 발생해야합니다.

R Markdown이 어떻게 작동하는지 모르지만 CSS 스타일 시트에서 클래스를 업데이트하는 것이 가장 좋습니다.하지만 빠른 수정, 당신은 다음과 같이 태그 내부에 R 인하 문서로 복사하고이 붙여 넣을 수 있습니다 :

<style> 
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { 
    background-color: purple; 
} 
</style> 

을 알약 버튼의 색상을 변경하려면, 당신은 유사한 방법을 사용할 수 있습니다, 이 대답 체크 아웃 : 내가 생성 된 HTML에서 찾고있다

https://stackoverflow.com/a/30324279

Answer 2

생성 된 html 파일을 열고 거기에서 스타일 요소를 연구 할 수 있습니다. 예를 들어 보여준 Rstudio의 기본값과 같은 간단한 예제의 경우, 아래에있는 것과 같은 html 파일에 다른 style 요소가 있습니다. 당신은 여기에서 각각을 바꿀 수 있고 나는 HTML과 같이 markdown에서 어떤 CSS라도 바꿀 수 있다고 믿습니다. 당신이 정상적인 HTML/CSS에서 할 수있는 일이라면, 당신은 반짝이는 것을 할 수 있어야합니다.

<style type="text/css"> 
    pre:not([class]) { 
    background-color: white; 
    } 
</style> 


<style type="text/css"> 
h1 { 
    font-size: 34px; 
} 
h1.title { 
    font-size: 38px; 
} 
h2 { 
    font-size: 30px; 
} 
h3 { 
    font-size: 24px; 
} 
h4 { 
    font-size: 18px; 
} 
h5 { 
    font-size: 16px; 
} 
h6 { 
    font-size: 12px; 
} 
.table th:not([align]) { 
    text-align: left; 
} 
</style> 


<style type="text/css"> 

#TOC { 
    margin: 25px 0px 20px 0px; 
} 
@media (max-width: 768px) { 
#TOC { 
    position: relative; 
    width: 100%; 
} 
} 


.toc-content { 
    padding-left: 30px; 
    padding-right: 40px; 
} 

div.main-container { 
    max-width: 1200px; 
} 

div.tocify { 
    width: 20%; 
    max-width: 260px; 
    max-height: 85%; 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    div.tocify { 
    width: 25%; 
    } 
} 

@media (max-width: 767px) { 
    div.tocify { 
    width: 100%; 
    max-width: none; 
    } 
} 

.tocify ul, .tocify li { 
    line-height: 20px; 
} 

.tocify-subheader .tocify-item { 
    font-size: 0.90em; 
    padding-left: 25px; 
    text-indent: 0; 
} 

.tocify .list-group-item { 
    border-radius: 0px; 
} 


</style> 



<style> 
#TOC { 
    color: purple; 
} 

</style> 

당신은 스타일을 변경하고 사용중인 스타일을 알고 HTML과 CSS의 약간의 지식이 필요 업데이트. 예를 들어, ues가 toc_float = false 인 경우 목차도 링크입니다. 당신은 클릭하지 않은 링크, 클릭 한 링크를 녹색으로 표시하고 링크 위로 마우스를 가져 가면 핫 핑크로 변경하는 것과 같은 링크의 색상 속성을 변경할 수 있습니다. 모든 html/css 요소를 정당화하는이 예제는 반짝이는 방식으로 변경할 수 있습니다.

--- 
title: "Untitled" 
output: 
    html_document: 
    keep_md: true 
    toc: true 
    toc_float: false 
    number_sections: true 
--- 

<style> 
a:link { 
    color: red; 
} 

a:visited { 
    color: green; 
} 

a:hover { 
    color: hotpink; 
} 

</style>