Unwanted line break inserted between bullet point symbol and list element in markdown lists

Hi all.

I’ve just created my first site and I’ve been pleasantly surprised with Hugo’s customization options. Thanks a lot for this wonderful SSG!

There’s one little issue that I can’t seem to figure out, hopefully somebody can point me in the right direction.

I’m using the hugo-profile theme, but I’m unsure of whether this is an issue with the theme, markdown or (most probably) me :slight_smile: Here’s my problem:

In one of my single pages, I’m simply hosting a privacy policy agreement, which I keep in a simple Markdown document. For the record, I was using this exact same Markdown document with a Jekyll site in the past, with none of these issues.

The privacy policy contains some unnumbered lists, and because they’re a bit verbose, I want to leave a blank line in between list items, like this:

For the purposes of this Privacy Policy:

- **Account** means a unique account created for You to access our Service or parts of our Service

- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
  

I’m a new user so I’m not allowed to upload more than one screenshot, but you can guess what the expected look was: blank lines in-between each list item (which is what it looked like in Jekyll).

However, this is what I’m getting with Hugo:

Looks the same in both Firefox and Chrome, and it also happens with numbered lists.

As you can see, a line break is being inserted in-between the list symbol and the line content.

If I take a look at the actual HTML that is produced, this is what it looks like:

<p>For the purposes of this Privacy Policy:</p>
<ul>
<li>
<p><strong>Account</strong> means a unique account created for You to access our Service or parts of our Service</p>
</li>
<li>
<p><strong>Affiliate</strong> means an entity that controls, is controlled by or is under common control with a party, where &ldquo;control&rdquo; means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.</p>
</li>

Interestingly enough, even if I only do this in the first two list items, the unwanted line break is inserted in ALL the elements of that list.

If I remove the extra blank line between items, like this:

- **Account** means a unique account created for You to access our Service or parts of our Service
- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.

Then everything looks “correct”, but of course without the spacing that I’m looking for. Again, can’t upload a screenshot of this, but you get the idea.

And this is the new HTML:

<p>For the purposes of this Privacy Policy:</p>
<ul>
<li><strong>Account</strong> means a unique account created for You to access our Service or parts of our Service</li>
<li><strong>Affiliate</strong> means an entity that controls, is controlled by or is under common control with a party, where &ldquo;control&rdquo; means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.</li>

I’m no expert in HTML, but it looks like, when I add a blank line between list items, Hugo wraps each of them inside a <p> element (which I guess is correct). But it also inserts a new line between the <li> tag and the actual list item… which is then translated into a new line.

Any idea of what the issue might be here? Is it a bug with the renderer, or am I doing something wrong?

I tried switching the markdown handler to blackfriday too, but the issue persisted.

Appreciate any support with this! :wink:

Hugo converts markdown to HTML using the Goldmark markdown renderer which adheres to the CommonMark specification.

Try it with the CommonMark reference implementation:
https://spec.commonmark.org/dingus/?text=List%201 -%20one -%20two List%202 -%20one -%20two -%20three

The bullet misplacement is a CSS issue; check theme:

Blackfriday support was deprecated several years ago.

1 Like

The bullet misplacement is a CSS issue; check theme:

Oh god… thank you! I spent quite a bit of time playing around with the li styling, but I didn’t think of ul… which is a good indication of my overall CSS knowledge (zero :sweat_smile:).

Checking Mozilla’s CSS docs, I find it interesting that this behaviour is expected when setting list-style-position to inside:

If a block element is the first child of a list element declared as list-style-position: inside, then the block element is placed on the line after the marker-box.

I wonder what’s the actual use case for that :thinking:

Also interesting to me that as soon as you add a blank line after one list item, all the elements of that list will be separated by one line, even if you keep the others tight in your markdown code.

Anyway, for anyone else who stumbles upon this, you can just add this to your custom styles.css file:

#single .page-content ol,
#single .page-content ul {
    list-style-position: outside !important;
}

I’m using theme components, which makes it extremely easy to create your own “custom theme” containing only the changes you want to make to the actual theme you’re using without duplicating the rest of the theme.

You’ll need to add the !important property though, as otherwise the change will not take priority over the original theme settings.

If that forces you to use !important, I wouldn’t call it “extremely easy”. Also,

  • the theme uses px in several places for font-size, which is not a good idea anymore (if it ever was)
  • the same goes for width/height values like 250px in the footer.css – how will that look on a smartphone in landscape mode? And there’s no media query for that…
  • and then there’s an inline style in head.html. Goodness.

Haha well, with “extremely easy” I was referring to Hugo’s theme component system, not to the hugo-profile theme itself. It’s my first time using Hugo (and to be honest, first time doing any significant stuff with CSS), so I can’t really judge that.

It does seem quite “hacky” to have to use something like an !important tag, but from what I read in the w3 docs, I thought it made sense here:

Maybe One or Two Fair Uses of !important

One way to use !important is if you have to override a style that cannot be overridden in any other way. This could be if you are working on a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.

If a theme is explicitly setting a specific style in one of their CSS sheets, and you want to override it using Hugo’s theme component system, is there any other way of doing that other than using an !important tag? I mean, can the theme author do anything to avoid that, short of giving you config params for every single CSS setting?

Anyway, I agree with your overall point. There seems to be room for improvement in those other areas too.

You could use a more specific selector (perhaps). But in my mind, a theme shouldn’t be written in a way that makes users resort to !important. OTOH, I only use one theme, and that doesn’t force its design decisions for lists on me.

Copy the CSS file from the theme to the same path in the root of your site folder and edit it there.

… and have it included twice?

Copy the CSS file from the theme to the same path in the root of your site folder and edit it there.

Won’t that force me to maintain a copy of the full CSS file on my side at all times? Sounds like a bad solution, especially since I will no longer get updates for that file from the original theme, which is one of the advantages of loading them as git submodules.

You

  • have to make a copy of the CSS
  • make sure to add this CSS to your HTML
  • which requires modifying the head.html or header.html template
  • which would only survive updates of the theme if you copied those

I agree, copying the CSS is not a good idea. In my opinion, this theme is not a good starting point, since it is not flexible and configurable enough.

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