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

时间:2017-09-13 15:43:11

标签: css r knitr r-markdown

我想根据标题级别缩进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的文件

enter image description here

但是,我希望缩进TOC(缩进等效于标题级别)。 通缉结果应如下所示: enter image description here

是否可以在render中设置此选项,或者可以将css参数传递给它?

1 个答案:

答案 0 :(得分:10)

我不知道内置的解决方案。但这里有一点调整:

<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. 的元素内的所有列表项
  3. 对于每个列表项,计算父元素的数量,直到您到达标识为TOC的元素。这是ul元素的数量。
  4. 根据父母的数量更改当前列表项的样式。
  5. 您可以通过使用text-indentpadding-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
    

    结果如下:

    enter image description here