Rmarkdown: Indentation of TOC items in HTML output

Question

I want to indent TOC according to header level.

My example document looks like this:

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

I'm compiling Rmd document with:

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))

This produces document with TOC

However, I want indented TOC (indentation equivalent to header level). Wanted result should look like this:

Is it possible to set this option in render or maybe pass css parameters to it?

Answer 1

I am not aware of a built-in solution. But here is a little tweak:

<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>

The depth of your headers is actually mapped inside the TOC. For each level you go down, a new ul element is created. This is what we are making use of here. In detail:

When the document has finished loading ($(document).ready(....):

1. Select all list items inside the element with id TOC
2. For each list item count the number of parent elements until you reach the element with id TOC. This is the number of ul elements.
3. Change the style for the current list item according to the number of parents.

You can tweak the spacing by playing around with the two parameters for text-indent and 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

This is the result: