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. 对于每个列表项,计算父元素的数量,直到到达具有id的元素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

这是结果: