Rmarkdown：HTML输出中TOC项目的缩进

Question

我想根据标题级别缩进TOC。

我的示例文档看起来是这样的：

# Tutorial 
## Start a new project 
### Project structure 
### Analysis code 

我编译Rmd文件有：

rmarkdown::render("foo.Rmd", 
        output_options = HTMLlook, 
        output_file = "foo.html") 

HTMLlook <- list(toc = TRUE, 
       toc_depth = 5, 
       toc_float = list(collapsed = FALSE, 
            smooth_scroll = TRUE)) 

这将产生文档与TOC

然而，我希望缩进TOC（缩进等效到标题级别）。 通缉的结果应该是这样的：

是否有可能在render设置此选项或可能通过CSS的参数呢？

Answer 1

我不知道内置解决方案。但这里是一个小的调整：

<script> 
    $(document).ready(function() { 
     $items = $('div#TOC li'); 
     $items.each(function(idx) { 
     num_ul = $(this).parentsUntil('#TOC').length; 
     $(this).css({'text-indent': num_ul * 10, 'padding-left': 0}); 
     }); 

    }); 
</script> 

页眉的深度实际上TOC里面映射。对于每个关卡，创建一个新的ul元素。这就是我们在这里使用的。详细介绍：

当文档完成加载（$(document).ready(....）：

1. 选择元素内所有列表项ID为TOC
2. 对于每个项目计算父元素的数量，直到你到达元素编号为TOC。这是ul元素的数量。
3. 根据父母的数量更改当前列表项的样式。

您可以通过玩弄text-indent和padding-left这两个参数来调整间距。

---

MRE：

--- 
title: "Habits" 
author: Martin Schmelzer 
date: September 14, 2017 
output: 
    html_document: 
    toc: true 
    toc_depth: 5 
    toc_float: 
     collapsed: false 
     smooth_scroll: true 
--- 

<script> 
$(document).ready(function() { 
    $items = $('div#TOC li'); 
    $items.each(function(idx) { 
    num_ul = $(this).parentsUntil('#TOC').length; 
    $(this).css({'text-indent': num_ul * 10, 'padding-left': 0}); 
    }); 

}); 
</script> 

# In the morning 

## Waking up 

### Getting up 

#### Take a shower 

##### Make coffee 

# In the evening 

## Make dinner 

这是结果：