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

Question

我在Google上花费了过多的时间，似乎无法弄清楚。

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

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

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

输出看起来像这样：

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

我想对这些交互式元素进行更多的自定义，但是我似乎找不到任何有关如何编程它们的文档。能够更改可以使用的Tab药片按钮也很好{.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>

为了更改药丸按钮的颜色，您可以使用类似的方法，并查看以下答案：

/sf/answers/2122699561/