Ordered lists breaking with divs between numbers

Currently, I am using Hugo and as Hugo has recently updated to goldmark, an extension of commonmark, I have run into a few issues. Primarily, ordered lists are breaking where I have a shortcode between list numbers.

My goal is to have a div as a child of list item - however, when adding a div between say 1 and 2, the ordered list breaks - creates the div outside of the ordered list, and proceeds to continue the list as a new element.

Looks like:

  1. content
  1. content


  1. content
  2. content


I have created a mock repository with the markdown.

To run have hugo installed and nav to home dir - execute hugo server in the command line.

Any help would be greatly appreciated.

The problem is NOT CommonMark.

Check out this demonstration using commonmark.js.

I’ve worked on Hugo code in the past, and know how shortcodes are implemented internally, I’m pretty confident the culprit is Hugo rather than Goldmark. Even if it is the latter, commonmark.org is not responsible. You would need to talk to the Goldmark developer.


I’ve spent the last few days playing with it and communicating with the Goldmark developers and community board. What I’ve come to conclude is that it ‘‘isn’t’’ broken, rather it’s working specifically how it’s intended too. I’ve hacked and resolved the issue by restyling the items to make it look how I’d like for it to be rendered. I find it to be a funky way of it working.

The demonstration you supplied is technically correct to what I’m looking for, I think it’s just a difference in implementation. If you check the produced HTML there’s a tag that shows

  1. item 2

If it’s not an inline html element (for example a hugo short code) or you put the div one line below the list item, the first ordered list closes, creates the div, and then starts the second ordered list. This is generally where my issue resides but for now have resolved it and hope to programatically have it working the way I desire too.

Closed for now, thank you for your help @vas :slight_smile:

My demo followed your supplied mock test: your shortcode was placed inline with item 1.

So if Hugo is passing your alert div inline just as your shortcode placement has it, it is a Goldmark problem. If Hugo is putting it on a new line, it is a Hugo limitation or bug.

1 Like