Question

我花了相当多的时间谷歌这个，似乎无法弄明白。

我正在使用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>

输出如下：

如您所见，TOC内的文字现在是紫色的。如何找出可用于更改此方式的其他属性？如何更改突出显示的TOC部分的颜色？

我想对这些互动元素进行更多自定义，但我似乎无法找到有关如何编程它们的任何文档。能够更改{.tabset .tabset-pills}可以获得的标签丸按钮也是很好的。

Answer 1

为了通过CSS更改浮动目录的属性，首先需要弄清楚元素的ID。一种简单的方法是在Chrome中打开HTML文件，右键单击浮动TOC中突出显示的部分，然后选择＆＃39;检查＆＃39;拉起开发者控制台。从那里，你应该看到一个＆＃39; Styles＆＃39;选项卡，将显示当前用于该项目的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，然后输入＆＃39; purple＆＃39;。您应该看到实时更改发生。

我不知道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一样改变降价中的任何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知识来更改样式并了解正在使用的样式。例如，作为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>

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

2 个答案: