Ordered lists with shortcodes break using 0.60.0

support
1

Updated to the most recent version of hugo (0.60.0) and noticed when building the site, the statement:
“Markup type mmark is deprecated and will be removed in a future release.”

I use a few of mmarks features in my current build and replacing them has proven to be a bit of an issue.

I frequently use shortcodes within ordered lists to display information boxes beneath a list item, however when doing so the shortcode produces a large gap between the rendered list.

Displayed:

testing
testing1496×544 16.6 KB

Desired:

testing2
testing2803×288 7.89 KB

Any help?

2

See the unsafe flag.

3

I had added unsafe and set the flag to true before noticing the changes. I’m not sure if that’s the problem.

4

Well then we’d need to see the shortcodes and the generated HTML to diagnose the problem.

1 Like
5

They are very simple Shortcodes:

the annotations shortcode is as such:

< div class=“yellow-annotations”>
{{.Inner}}
</ div>

the alert shortcode is as follows:

< div class=“alert {{ if .IsNamedParams }} {{with .Get “theme” }}alert-{{.}}{{else}}alert-info{{end}}”{{else}}{{with .Get 0 }}alert-{{.}}{{else}}alert-info{{end}}"{{end}} role=“alert”>
{{.Inner}}
</ div>

For whichever reason, using the alert shortcode within the annotations causes this styling problem.

The html is rendered like so:
display

6

No one can debug this without seeing all the parts. Please share a repo that reproduces this issue, including the CSS, which is apparently the issue.

7

The problem is beyond css because the issue resides in the rendering of the order list as noted above.

I have found that when using BlackFriday the issue fixes with markdownify inside the annotations shortcode however other shortcodes break, would like to stick with goldmark.

If, for example, I use a div (not a shortcode) around an ordered list, add the alert shortcode, the list will still break. It begins an ordered list, breaks out of the ordered list, and starts again after the alert.

I will try and get a repo going to reproduce the error.

8

Heres a repo to the exact issue. Same theme and styling excluding the yellow list items.

Run with a hugo server

9

I’m also experiencing a problem. If I include, in a list, a shortcode that creates notes, it breaks the output in the following ways:

  • if the shortcode is indented, the <article> element is closed after the note’s closing <div> tag.
  • if the shortcode is not indented, the list after is it shown as plaintext until the next heading, when the regular Markdown formatting returns.

My “unsafe” flag is set to true.

When I tried changing the formatter back to Blackfriday, the HTML was omitted regardless of any settings that I tried…

EDIT: I found a workaround - I modified the code of the shortcode, including the HTML, so that’s it’s all a single line now, without spaces where indentation used to be. It seems to help in my case.

10

I found that blackfriday resolved my issue with { .Inner | Markdownify } but as mentioned other shortcodes broke. Sometimes commonmark / goldmark worked when I put the entire alert inline inside the annotation. When I removed the annotation shortcode and wrapped the ordered list within a div and placed the alert within the list, still… it broke. So, I’m not sure if it’s a bug in goldmark or it’s doing what it’s designed to do but it is very annoying.