HTML detail tag enclosing content in a pre-block with a copy button, why?

support
1

I am trying to use the HTML details tag for a collapsing section - which is notated in markdown. But the content is enclosed in a pre-block and a code-block and there is a copy button.

Here’s my source:

- here we have one level
    <details open>
      <summary>a test of details</summary>

        -  some content  
        -  some more content  
            - indented one level
              - indented two levels
          - more indented one level
    </details>

- here we have the next at one level

Here’s what it looks like rendered:

image
image780×275 10.9 KB

And here’s what the generated HTML looks like:

<li>
<p>here we have one level</p>
  <details open="">
    <summary>a test of details</summary>
<pre><button class="code-copy-btn" type="button">copy</button><code>  -  some content  
  -  some more content  
      - indented one level
        - indented two levels
    - more indented one level
</code></pre>
  </details>
</li>

I don’t know where that extra stuff is coming from. I really just want the normally rendered markdown stuff.

Hugo version: hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

Excerpt of config.toml:

[markup.goldmark.renderer]
unsafe = true

[markup.goldmark.extensions]
footnote = true
strikethrough = true
table = true

Theme is monkeyWzr at a27a143.

With this custom.css:

/* hide the 'article-gallery' */
.article-gallery {
  display: none;
}

/* make sure menus don't print */
@media print {
  div#header-post           { display: none; }
  div#footer-post           { display: none; }
  div#footer-post-container { display: none; }
  footer#footer             { display: none; }
  body                      { font-size: 11px; }
}
2

Hugo renders markdown to HTML with yuin/goldmark which conforms to the CommonMark specification.

Your markdown example is rendered correctly. Try it.

According to the specification, text indented with four or more spaces is interpreted as a code block.

Do this instead:

- here we have one level
  <details open>
  <summary>a test of details</summary>
  
  - some content  
  - some more content  
    - indented one level
    - indented two levels
  - more indented one level
  </details>

- here we have the next at one level
3

I had long forgotten about that “indent 4 spaces to get a code block” as I always use fenced code blocks. Thank you!

Plus, there was one other thing I needed in fact, recording it here for posterity: This particular “details” block is already at an indented level in a list. I needed to add 4 nonbreaking spaces in front of the details, like this:

- here we have one level
&nbsp;&nbsp;&nbsp;&nbsp;<details><summary>a test of details</summary>
    - some content
    ...

and now everything looks perfect: it’s all indented correctly.

(Can’t figure out how to do the “try it” thing or I would have provided one here, sorry.)

4

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