htmlrr-markdownmarkdownpandoc

How to indent a heading under a numbered list in Rmarkdown knitting to HTML?


I have this Rmarkdown file:

---
title: "Indent heading under list"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## This is a heading

1. I have some numbered list items under this heading

2. And I want to have sub-heading under this numbered listed

3. Under this new sub-heading, I want to have tabs under it

### Sub-heading I want {.tabset .tabset-fade .tabset-pills}

#### Apple

- This is an apple

#### Orange

- This is an orange

###

4. I want the above sub-heading to have indentation so that it is indented under item number 3 above

Which is currently like this:

current_subheading

As explained in the Rmarkdown itself, I want to have indentation of the sub-heading under the numbered list, so that it will look like this:

target_subheading

Most resources I found online recommend manually indenting the heading(s) with four spaces under the numbered list, but that doesn't work (see attached screenshot).

manual_indent


Solution

  • If you add an indented hyphen before the ### then this creates an indented sub-header. But then there's a bullet, I don't know how to get rid of this one (Edit: now I know; see at bottom).

    ---
    title: "Indent heading under list"
    output: html_document
    ---
    
    
    ## This is a heading
    
    1. I have some numbered list items under this heading
    
    2. And I want to have sub-heading under this numbered listed
    
    3. Under this new sub-heading, I want to have tabs under it
    
      - ### Sub-heading I want 
    
        - And I also want an apple
    

    pandoc indented subheader


    EDIT

    Here is a CSS way to remove the bullet.

    First, assign a HTML class, say nobullet to the subheader:

    3. Under this new sub-heading, I want to have tabs under it
    
      - ### Sub-heading I want {.nobullet}
    
        - And I also want an apple
    

    Now, add this CSS somewhere, e.g. at the beginning of the document:

    <style>
    li:has(.nobullet) {list-style-type: none;}
    </style>
    

    2nd EDIT

    Here is a simpler solution, and this one works with the tabs.

    ---
    title: "Indent heading under list"
    output: html_document
    ---
    
    <style>
    .indented {padding-left: 100px;}
    </style>
    
    ## This is a heading
    
    1. I have some numbered list items under this heading
    
    2. And I want to have sub-heading under this numbered listed
    
    3. Under this new sub-heading, I want to have tabs under it
    
    ### Sub-heading I want {.indented .tabset .tabset-fade .tabset-pills}
    
    #### Apple 
    
      - And I also want an apple
    
    #### Orange
    
      - This is an orange
    
    
    ### 
    
    4. I want the above sub-heading to have indentation so that it is indented under item number 3 above
    

    pandoc padding