How to suppress paragraphs in list items?

support
1

I’m using hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d+extended

When I break a list into two columns (like here) then the list items get wrapped with paragraphs:

  <div class="flex-even markdown-inner">
<ul>
<li>
<p>Christianity</p>
</li>
<li>
<p>Islam</p>
</li>
<li>
<p>Hinduism</p>
</div>
<div class="flex-even markdown-inner">
</li>

See the live page here. Is there any way to suppress the paragraphs? Also, the </div> seems to be in a strange place, but maybe that’s harmless?

Thank you

2

With this shortcode:

https://github.com/alex-shpak/hugo-book/blob/master/layouts/shortcodes/columns.html

And this markdown (note the {{< foo >}} shortcode notation):

{{< columns >}}

- Christianity
- Islam
- Hinduism

<--->

- Buddhism (Vajrayāna, Mahāyāna, & Zen)
- Daoism (Taoism)
- Judaism

{{< /columns >}}

Hugo renders this HTML:

<div class="book-columns flex flex-wrap">
  <div class="flex-even markdown-inner">
    <ul>
      <li>Christianity</li>
      <li>Islam</li>
      <li>Hinduism</li>
    </ul>
  </div>

  <div class="flex-even markdown-inner">
    <ul>
      <li>Buddhism (Vajrayāna, Mahāyāna, &amp; Zen)</li>
      <li>Daoism (Taoism)</li>
      <li>Judaism</li>
    </ul>
  </div>
</div>

The theme author provides documentation for the columns shortcode. Again, note the {{< foo >}} shortcode notation.

https://hugo-book-demo.netlify.app/docs/shortcodes/columns/

3

Hm, yeah, that fixes the problem but your proposal conflicts with your suggested fix for footnotes in multiple columns. Is there a solution for both issues?

4

Sure.

markdown

{{% columns %}}

- Christianity
- Islam[^1]
- Hinduism

<--->

- Buddhism (Vajrayāna, Mahāyāna, & Zen)
- Daoism (Taoism)
- Judaism

{{% /columns %}}

[^1]: A footnote.

layouts/shortcodes/columns.html

<div class="book-columns flex flex-wrap">
  {{ range split .Inner "<--->" -}}
    <div class="flex-even markdown-inner">
      {{ . | safeHTML -}}
    </div>
  {{ end }}
</div>

Note the -}} to remove white space in a couple of places.

Hugo uses github.com/yuin/goldmark to render markup to HTML. Goldmark adheres to the CommonMark specification, where blank lines in HTML blocks are an end condition.

See https://spec.commonmark.org/0.30/#html-blocks

1 Like
5

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