html - 使用外部自定义 css 文件的 float 目录的 Rmarkdown 颜色标题

Question

我正在使用 .rmd 文件生成 .html 文件。我在该 html 中有一个 float 目录，我想使用外部 custom.css 为该目录中的标题着色

我现在可以只使用 latex 为标题着色，我想避免这种解决方法。

这将是我的 rmarkdown .rmd 文件，我在其中引用名为“style.css”的外部 css 文件。 我留下了一个为最后一个标题着色的 latex 语法。

---
title: "Notebook title"
output:
  html_document:
    css: style.css
    number_sections: false
    toc: true
    toc_depth: 4
    toc_float: true
---

# H1
## H2
### H3
# $\color{#B6854D}{\text{H1 colored with Latex}}$ {-}

下面是我的客户“style.css”文件，我想为 TOC 标题内容着色。您可以看到我已经根据 #TOC id 调整了 TOC 宽度。

#TOC {
  position: fixed;
  left: 30px;
  width: 440px;
  max-width:100%;
  overflow:auto;
}

h1.title {
  color: #66b2b2;
}

h1 {
  color: #B6854D;
}

h2 {
  color: #F4B5BD;
}

输出如下:

在 .html 文件中使用 latex 检查彩色 H1 元素，我发现了以下内容:

<li class="tocify-item list-group-item active" data-unique="(color{b6854d}{text{h1_colored_with_latex}})" style="cursor: pointer;"><span class="math inline"><span class="MathJax_Preview" style="color: inherit; display: none;"></span><span class="MathJax" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mstyle mathcolor=&quot;#B6854D&quot;><mtext>H1 colored with Latex</mtext></mstyle></math>" role="presentation" style="position: relative;"><nobr aria-hidden="true"><span class="math" id="MathJax-Span-1" style="width: 11.432em; display: inline-block;"><span style="display: inline-block; position: relative; width: 9.527em; height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(1.313em, 1009.53em, 2.384em, -999.997em); top: -2.199em; left: 0em;"><span class="mrow" id="MathJax-Span-2"><span class="mstyle" id="MathJax-Span-3" style="color: rgb(182, 133, 77);"><span class="mrow" id="MathJax-Span-4" style="color: rgb(182, 133, 77);"><span class="mtext" id="MathJax-Span-5" style="font-family: MathJax_Main; color: rgb(182, 133, 77);">H1 colored with Latex</span></span>
    </span>
    </span><span style="display: inline-block; width: 0px; height: 2.205em;"></span></span>
    </span><span style="display: inline-block; overflow: hidden; vertical-align: -0.068em; border-left: 0px solid; width: 0px; height: 1.004em;"></span></span>
    </nobr><span class="MJX_Assistive_MathML" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle mathcolor="#B6854D"><mtext>H1 colored with Latex</mtext></mstyle></math></span></span>
    <script type="math/tex" id="MathJax-Element-1">\color{#B6854D}{\text{H1 colored with Latex}}</script>
    </span>
</li>

你可以看到我是如何使用 latex 编写的六色“b6854d”。

Answer 1

答案由用户“atusy”在 github 上发布在以下 URL 中: https://github.com/rstudio/rmarkdown/issues/1682

我添加了另一个较低级别的标题 h2 注意 #TOC>ul>ul>li

下面是`.rmd文件:

---
output:
  html_document:
    toc: true
    toc_float: true
---

```{css, echo = FALSE}
h1, #TOC>ul>li {
  color: #ff0000;
}

h2, #TOC>ul>ul>li {
  color: #F4B5BD;
  font-family:  "Times";
  font-weight: bold;
}
```

# H1 1

# H1 2

## H2