如何在R Markdown中复刻RStudio Cobalt主题代码块样式？

现成CSS模板方案 #

把下面的CSS代码放到你的R Markdown文档的<style>标签中，或者引用单独的.css文件，之后只需给代码块设置class.source="cobalt"和class.output="cobalt"，就能匹配Cobalt主题的完整高亮效果：

/* Cobalt主题代码块基础样式 */
.cobalt {
  background-color: #193549 !important;
  border: 1px solid #325D79 !important;
  border-radius: 4px;
  padding: 12px;
  font-family: "Fira Code", "Consolas", "Monaco", monospace !important;
  font-size: 14px;
  line-height: 1.5;
  /* 启用连字效果 */
  font-variant-ligatures: contextual discretionary;
}

/* 语法高亮细节（对齐Cobalt主题） */
.cobalt .hljs-string { color: #9CDCFE; }
.cobalt .hljs-number { color: #B5CEA8; }
.cobalt .hljs-keyword { color: #C586C0; }
.cobalt .hljs-function { color: #DCDCAA; }
.cobalt .hljs-boolean { color: #569CD6; }
.cobalt .hljs-comment { color: #6A9955; font-style: italic; }
.cobalt .hljs-variable { color: #9CDCFE; }
.cobalt .hljs-operator { color: #D4D4D4; }

代码块使用示例：

```{r class.source="cobalt", class.output="cobalt"}
# 测试代码
calc_result <- function(a, b, is_positive) {
  if (is_positive) {
    return(paste("Positive sum:", a + b))
  } else {
    return(a - b > 0)
  }
}
calc_result(10, 3, TRUE)

## CSS可设置的其他样式选项
除了`background-color`和`border`，针对代码块还可以调整这些样式：
- **字体相关**：`font-family`（推荐选带连字的等宽字体如Fira Code）、`font-size`、`font-weight`、`line-height`（控制行间距）、`font-variant-ligatures`（开关连字）
- **文本样式**：`color`（代码默认文本色）、`text-shadow`、`font-style`（比如给注释加斜体）
- **布局间距**：`padding`（代码块内部留白）、`margin`（代码块与其他内容的外部间距）
- **视觉细节**：`border-radius`（圆角）、`box-shadow`（阴影效果）
- **滚动设置**：`overflow-x: auto`（长代码块横向滚动），还可通过`::-webkit-scrollbar`系列伪类自定义滚动条样式
- **语法高亮细分**：通过`hljs-*`类针对不同语法元素（注释、关键字、变量等）单独设置样式

## 相关参考文档
- R Markdown官方文档的**HTML输出自定义**章节，详细说明`class.source`/`class.output`的用法及CSS定制逻辑
- Highlight.js官方文档，列出所有可用的`hljs-*`语法类，方便精准调整每个元素的高亮样式
- RStudio主题原生样式定义，可直接参考Cobalt主题的CSS变量和规则，匹配细节效果

内容的提问来源于stack exchange，提问作者cach1