如何自定义Quarto文档的目录（TOC）以复刻Rmarkdown样式？

要在Quarto中还原Rmarkdown的目录样式，通过自定义CSS即可实现，具体步骤如下：

1. 明确Rmarkdown目录的核心样式特征 #

通常Rmarkdown的目录具备这些特点：

• 层级缩进清晰，不同级别标题间距区分明显
• 链接悬停时有高亮或下划线效果
• 容器带有浅背景色和边框，视觉上独立于正文
• 目录标题字体加粗，与列表项形成区分

2. 编写自定义CSS文件 #

在Quarto文档的同级目录下创建custom-toc.css文件，写入以下样式代码：

/* 目录容器整体样式 */
.quarto-toc {
  background-color: #f7f7f7;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

/* 目录标题样式 */
.quarto-toc-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 0.4rem;
}

/* 目录列表基础样式 */
.quarto-toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.quarto-toc li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* 二级及以下标题缩进 */
.quarto-toc ul ul {
  padding-left: 1.2rem;
  margin-top: 0.3rem;
}

/* 目录链接样式 */
.quarto-toc a {
  color: #007bc2;
  text-decoration: none;
}

/* 链接悬停效果 */
.quarto-toc a:hover {
  color: #005f99;
  text-decoration: underline;
}

3. 在Quarto文档中引入CSS #

在.qmd文件开头的YAML配置中添加以下内容，启用目录并加载自定义样式：

format:
  html:
    css: custom-toc.css
    toc: true
    toc-depth: 3 # 根据需求调整目录显示的层级深度

4. 按需调整细节 #

如果需要更贴合你熟悉的Rmarkdown样式，可针对性修改CSS：

• 调整background-color、border属性匹配原目录的边框和背景
• 修改字体大小、颜色来统一文字风格
• 若原目录带有序号，可通过CSS计数器（counter-reset/counter-increment）实现自动编号

内容的提问来源于stack exchange，提问作者Pedro J. Pérez