CODEWITHSUNDEEP
markdown
janw
janw

Reputation: 9616

Remove spacing before list in Markdown

I have the following Markdown string:

`log-level` (optional)<br>
Sets the minimal log level messages need in order to be printed to stdout.

Allowed values:
- `debug`
- `warning`
- `error` (default)

GitHub as well as Stack Overflow render it like this (blockquote added for visual distinction):

log-level (optional)
Sets the minimal log level messages need in order to be printed to stdout.

Allowed values:

  • debug
  • warning
  • error (default)

(screenshot from GitHub)

As visible here and in the screenshot, the Markdown renderer adds spacing between the last paragraph ("Allowed values") and the first list item.

Checking the generated HTML shows why:

<p><code>log-level</code> (optional)<br>
Sets the minimal log level messages need in order to be printed to stdout.</p>
<p>Allowed values:</p>
<ul>
<li><code>debug</code></li>
<li><code>warning</code></li>
<li><code>error</code> (default)</li>
</ul>

The text "Allowed values" is placed in an own <p> tag, and there is a margin between the <p> and the following <ul>.

Is there a way to reduce or get rid of that space, such that it roughly matches the space between list items?

Upvotes: 8

Views: 10359

Answers (3)

Tnsu KYRK
Tnsu KYRK

Reputation: 310

try adding this header to your markdown file:

<style>
p:has(+ ul) {
  margin-bottom: 0;
}
p + ul {
  margin-top: 0;
}
</style>

Upvotes: 0

janw
janw

Reputation: 9616

The spacing is caused by the bottom margin of the <p></p> tags wrapping each paragraph.

There is a workaround if your Markdown parser supports HTML: Some parsers (e.g., Markdig, which Stack Overflow uses) don't generate <p></p> tags when you put text directly below another explicit <p></p> tag:

<p>...</p>
Allowed values:

* `debug`
* `warning`
* `error` (default)

generates

...

Allowed values:
  • debug
  • warning
  • error (default)

(screenshot)

Whether that really looks better or makes sense from an accessibility aspect, is another question.

Upvotes: 4

Skwid
Skwid

Reputation: 29

This may not be exactly what you are looking for, but there is no way that I know of to do what you're asking. A possible workaround to this would be to make your list a sub-list by adding an equal amount of spaces to sub-bullets. See below:

`log-level` (optional)<br>
Sets the minimal log level messages need in order to be printed to stdout.

- Allowed values:
  - `debug`
  - `warning`
  - `error` (default)

log-level (optional)
Sets the minimal log level messages need in order to be printed to stdout.

  • Allowed values:
    • debug
    • warning
    • error (default)

Upvotes: 2

Related Questions