html - 使用外部自定义 css 文件的浮动 TOC 的 Rmarkdown 颜色标题
问题描述
我正在使用 .rmd 文件来生成 .html 文件。我在该 html 中有一个浮动目录,我想使用外部 custom.css 为该目录中的标题着色
我现在只能使用乳胶为标题着色,我想避免这种解决方法。
这将是我的 rmarkdown .rmd 文件,我在其中引用了一个名为“style.css”的外部 css 文件。我留下了为最后一个标题着色的乳胶语法。
---
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}}$ {-}
以下是我想为 TOC 标头内容着色的客户“style.css”文件。你可以看到我已经调整了引用 #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 文件中使用乳胶检查彩色 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="http://www.w3.org/1998/Math/MathML"><mstyle mathcolor="#B6854D"><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>
您可以看到我使用乳胶编写的六色“b6854d”。
解决方案
答案由 github 上的用户“atusy”发布在以下 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
推荐阅读
- c# - 我如何获取所有 blob 而不仅仅是根目录中的 blob
- linux - 如果写入的值未更改, mmap() 是否会执行写入?
- r - R中带有md5的递归文件列表
- android - 在某些设备上使用 Fresco 进行缓存会导致 OOM
- outlook-calendar - 无法获取 Outlook 日历事件,javascript
- python - 关闭控制台时执行python指令
- javascript - 如何从代码中在迷你图中显示工具提示
- python - 多并行输入和多步输出时间序列预测
- powershell - Powershell 仅复制子文件夹
- reactjs - 如何渲染 React 组件树中节点的位置?