Rmarkdown: indent TOC elements in HTML output

Question

I want TOC indents according to the header level.

My sample document is as follows:

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

I am compiling a document Rmdwith:

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 creates a document with TOC

However, I want to indent TOC (indent equivalent to header level). The required result should look like this:

Is it possible to set this parameter to renderor maybe pass css parameters to it?

Answer 1

I do not know about the built-in solution. But here is a small 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>

TOC. , , ul. , . :

($(document).ready(....):

• TOC
• , id TOC. ul.
• .

, 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

: