RMarkdown中不使用CSS文件修改tabset标签颜色的方法
无需独立CSS文件,你提到的两种实现思路都可行,具体可通过以下三种方式实现:
方法1:直接在Rmd正文中插入内嵌CSS
RMarkdown的tabset本质是渲染后生成的HTML类元素,你可以直接在yaml头之后、正文开头的位置插入<style>标签自定义样式,全局修改所有标签页的外观,代码示例如下:
<style> /* 标签导航栏底部边框样式 */ .nav-tabs { border-bottom: 2px solid #2c3e50; } /* 未选中标签的样式 */ .nav-tabs > li > a { background-color: #ecf0f1; color: #34495e; border: 1px solid #bdc3c7; margin-right: 2px; } /* 选中状态标签的样式 */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background-color: #3498db; color: #ffffff; border: 1px solid #2c3e50; border-bottom-color: transparent; } /* 鼠标悬停未选中标签的样式 */ .nav-tabs > li > a:hover { background-color: #bdc3c7; color: #2c3e50; } </style>
插入后正常编写tabset相关内容即可,渲染后样式自动生效。
方法2:在yaml配置中添加内联CSS
如果希望样式配置集中在yaml头中,可以通过output字段的includes.in_header参数直接嵌入CSS代码,无需额外的头部文件,yaml示例如下:
--- title: "tabset样式测试" output: html_document: includes: in_header: !expr paste0( '<style>', '.nav-tabs > li.active > a {background-color: #e74c3c; color: #fff; border-color: #c0392b;}', '</style>' ) ---
这里通过!expr语法直接拼接<style>标签字符串插入到生成HTML的头部,效果和直接在正文中写CSS一致。
方法3:外层包裹HTML标签针对性修改单个tabset
如果不需要全局修改所有标签页,只想修改某一个tabset的样式,可以给目标tabset外层套一个带自定义类的div标签,再编写对应类的CSS规则即可,示例如下:
首先添加仅针对自定义类的CSS规则:
<style> /* 仅修改class为custom-tab的容器内的tabset样式 */ .custom-tab .nav-tabs > li.active > a { background-color: #2ecc71; color: #fff; } .custom-tab .nav-tabs > li > a { background-color: #f8f9fa; } </style>
再用对应类的div包裹你的tabset内容:
<div class="custom-tab"> # 分类模块 {.tabset} ## 标签1 标签1对应的内容 ## 标签2 标签2对应的内容 </div>
这种方式不会影响页面内其他tabset的样式,灵活性更高。
内容的提问来源于stack exchange,提问作者Jaskeil
相关产品推荐
相关产品推荐

