如何更改 R Markdown HTML 文档中目录的颜色和属性？

Question

我在 Google 上花费了大量时间，但似乎无法弄清楚。

我正在使用 R Markdown 制作 HTML 文档（此处的文档：http://rmarkdown.rstudio.com/html_document_format.html）。

我想更改浮动目录的颜色和其他属性。最好，我想通过 Rmd 文件本身中的嵌入式 CSS 来做到这一点。例如，如果我将它放在我的 Rmd 文件中，我已经可以更改出现在 TOC 中的文本的颜色：

---
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>

输出如下所示：

如您所见，目录中的文本现在是紫色的。我怎样才能找出可以通过这种方式更改的其他属性？如何更改突出显示的目录部分的颜色？

我想对这些交互式元素进行更多自定义，但我似乎找不到任何关于如何对其进行编程的文档。能够更改您可以使用{.tabset .tabset-pills} 获得的标签药丸按钮也将是一件好事。

Answer 1

为了通过 CSS 更改浮动目录的属性，您首先需要找出元素的 ID。一个简单的方法是在 Chrome 中打开 HTML 文件，右键单击浮动目录中突出显示的部分，然后选择“检查”以调出开发人员控制台。从那里，您应该会看到一个“样式”选项卡，其中将显示当前用于该项目的 CSS，以及该项目的关联 ID。

例如，突出显示的 TOC 元素的默认 CSS 如下所示：

.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;
}

这里，background-color 指的是突出显示的 TOC 元素的颜色，当前设置为默认蓝色 (#337ab7)。为了让它变成不同的颜色，你实际上可以在 Chrome 中玩。尝试单击#337ab7，然后输入“紫色”。您应该看到实时发生的变化。

我不知道 R Markdown 是如何工作的，但最好的做法是更新你的 css 样式表中的类。不过，作为快速修复，您可以将其复制并粘贴到标签内的 R Markdown 文档中，如下所示：

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

为了改变药丸按钮的颜色，你可以使用类似的方法，看看这个答案：

https://stackoverflow.com/a/30324279

Answer 2

您可以打开生成的 html 文件并在那里研究样式元素：对于一个简单的示例，例如您作为示例显示的 Rstudio 的默认值，html 文件中有不同的style 元素，如下所示。您可以在这里更改其中的每一个，我相信您可以像使用 html 一样更改 markdown 中的任何 css。任何你可以在普通的 html/css 中做的事情，你都应该可以在 shiny 中做。

<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 有一点了解才能更改样式并了解正在使用的样式。例如，使用toc_float = false时的目录也是一个链接；您可以更改链接的颜色属性，例如下面显示未单击的链接，单击的链接为绿色，如果将鼠标悬停在链接上，颜色将变为 hotpink。这个例子证明任何 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>