Search code examples
r-markdownmarkdownpandoc

How to avoid code blocks within bullet list increasing the vertical line spacing?

With the settings

output:
  github_document:
    toc: true
    number_sections: true

and

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

compare

# Test
* foo
* bar
* boo

with output

enter image description here

to

# Test
* foo
  ```{r, echo = TRUE}
  print("eg")
  ```
* bar
* boo

with output

enter image description here

and we can see that the vertical spacing has been changed without any command to do so. How can this be prevented?

Solution

  • Consider this quick workaround:

    ---
output:
  github_document:
    toc: true
    number_sections: true
---

```{css, echo = FALSE}
li>p {
    margin-top: 0;     # default value: 16px
  }
p, blockquote, ul, ol, dl, table, pre {
    margin-bottom: 0;  # default value: 16px
  }
```

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

    Output:
    enter image description here

    By default, code chunks in R Markdown are included in the tag <div class="..." /> in the HTML output. When <div> element is embedded in the list, item content (foo) will be wrapped in the <p> tag. So, we need to set its CSS properties: margin-top and margin-bottom to the 0.

    <ul>
    <li>
        <p>foo</p>
        <div class="sourceCode" id="...">...</div>
    </li>
    .
    .
</ul>