gpt4 book ai didi

css - Rmarkdown : Indentation of TOC items in HTML output

转载 作者:技术小花猫 更新时间:2023-10-29 10:37:25 25 4
gpt4 key购买 nike

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

但是,我想要缩进目录(缩进相当于标题级别)。 想要的结果应该是这样的: enter image description here

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

最佳答案

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

<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. 根据 parent 的数量改变当前列表项的样式。

您可以通过调整 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

关于css - Rmarkdown : Indentation of TOC items in HTML output,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46201753/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com