Remove space between paragraph and immediately following list item

I’d like to get the effect desired in this question - when there is a Markdown paragraph followed by a list item (separated by a single newline), I’d like to have the rendered list also not have a space between it and the preceding paragraph. I primarily use Obsidian which renders lists in this way in Live Preview, but currently Hugo separates them whether or not there is a space between the list and paragraph.

Is this possible? I’d like to do this without altering the source Markdown.

No, it does not. Hugo’s markdown renderer follows the CommonMark spec (try it). You are seeing the effects of either default browser CSS, or custom CSS in your theme.

With no CSS, this markdown:

This is a list:

- one
- two

is rendered to:

<p>This is a list:</p>
<ul>
<li>one</li>
<li>two</li>
</ul>

And looks like this in the browser:

image

You can add some CSS:

p:has(+ ul) {
  margin-bottom: 0;
}
p + ul {
  margin-top: 0;
}

and get this:

image

See https://caniuse.com/?search=%3Ahas

4 Likes

Thank you for clarifying and for the CSS snippet, @jmooring, it’s working on my site. I think it removes the space whether or not a space is present between the text and and the list in Markdown, but that’s fine with me.

Whether or not there’s a space between the text and the list items below is irrelevant. Both are rendered to the same HTML per the CommonMark specification.

Example 1

This is a list:

- one
- two

Example 2

This is a list:
- one
- two

Both are rendered to:

<p>This is a list:</p>
<ul>
<li>one</li>
<li>two</li>
</ul>

Try both using the reference implementation.

This isn’t a Hugo thing… this is standard markdown rendering.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.