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

Question

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

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

我想更改 float 目录的颜色和其他属性。最好，我想通过 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>

输出看起来像这样:

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

我想对这些交互元素做更多的定制，但我似乎找不到任何关于如何对它们进行编程的文档。如果能够更改您可以使用 {.tabset .tabset-pills} 获得的选项卡药丸按钮，那也很好。

Answer 1

要通过 CSS 更改 float 目录的属性，您首先需要确定元素的 ID。一种简单的方法是在 Chrome 中打开 HTML 文件，右键单击 float 目录中突出显示的部分，然后选择“检查”以调出开发人员控制台。从那里，您应该看到一个“样式”选项卡，它将显示当前用于该元素的 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，然后输入“purple”。您应该看到实时发生的变化。

我不知道 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