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 

這是結果：