如何在R Markdown HTML文档中更改目录的颜色和属性？ [英] How to change colors and attributes of Table of Contents in R Markdown HTML document?

问题描述

我花了很多时间在Google上，而似乎无法弄清楚。

我正在使用R Markdown制作HTML文档（此处的文档：

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

我想对这些交互式元素进行更多的自定义，但是我似乎找不到任何有关如何编程它们的文档。能够更改您可以通过 {。tabset .tabset-pills} 获得的Tab药片按钮也很好。

解决方案

为了通过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; 
颜色：#fff; 
 background-color：＃337ab7; 
 border-color：＃337ab7; 
} 
  

这里，背景色表示突出显示的TOC元素的颜色，当前设置为默认蓝色（＃337ab7）。要使其具有不同的颜色，您实际上可以直接在Chrome浏览器中播放。尝试单击＃337ab7，然后输入紫色。您应该看到更改实时发生。

我不知道R Markdown的工作原理，但是最好的做法是更新CSS样式表中的类。不过，作为一种快速解决方案，您可以将其复制并粘贴到标签内的R Markdown文档中，如下所示：

 < ; style> 
 .list-group-item.active，.list-group-item.active：focus，.list-group-item.active：hover {
背景颜色：紫色； 
} 
< / style> 
  

要更改药丸按钮的颜色，您可以使用类似的方法并签出这个答案：

https://stackoverflow.com/a/30324279

I've spent an inordinate amount of time Google'ing this and can't seem to figure it out.

I am making HTML documents using R Markdown (docs here: http://rmarkdown.rstudio.com/html_document_format.html).

I want to change the color, and other attributes, of the floating table of contents. Preferably, I would like to do this via embedded CSS in the Rmd file itself. For example, I can already change the color of the text that appears in the TOC if I put this in my Rmd file:

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

output looks like this:

As you can see, the text inside the TOC is now purple. How can I find out what other attributes are available to change this way? How can I change the color of the highlighted TOC section?

I would like to do a lot more customization to these interactive elements but I can't seem to find any documentation on how to program them. It would also be nice to be able to change the tab pill buttons that you can get with {.tabset .tabset-pills}.

解决方案

In order to change attributes of the floating Table of Contents via CSS, you first need to figure out the ID's of the elements. An easy way to do this is to open the HTML file in Chrome, right-click on the highlighted section in the floating TOC, and then select 'Inspect' to pull up the developer console. From there, you should see a 'Styles' tab, which will show the CSS currently used for the item, along with the item's associated ID's.

For example, the default CSS for the highlighted TOC element looks like this:

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

Here, the background-color refers to the color of the highlighted TOC element, and is currently set to the default blue color (#337ab7). To make it a different color, you can actually play around right in Chrome. Try clicking on #337ab7, and then typing in 'purple'. You should see the change occur in real time.

I don't know how R Markdown works, but the best practice is to update the class in your css stylesheet. As a quick fix though, you can just copy and paste this into your R Markdown document inside the tags, like this:

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

In order to change the colors of the pill buttons, you can use a similar method, and check out this answer:

https://stackoverflow.com/a/30324279

这篇关于如何在R Markdown HTML文档中更改目录的颜色和属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！