Incorrect code fence width affecting background color

[exastone]

What version of Hugo are you using (hugo version)?

$ hugo version
hugo v0.110.0+extended darwin/amd64

Does this issue reproduce with the latest release?

yes. currently using latest release.

The {{ highlight }} function resulting in generating html/css that does not fully span the entire width of the fenced code block when there is long lines.

After inspecting the generated css this issue can be resolved by adding width: fit-content to the div that immediately follows <div class="highlight">

Here is a simple example to reproduce:

{{< highlight md >}}
  // this is a looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line
{{< /highlight >}}

Here is the generated html for a simplified example (line numbers option off):

<div class="highlight">
  <pre tabindex="0" style="color:#d8dee9;background-color:#2e3440;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
    <code class="language-md" data-lang="md">
        <span style="display:flex;">
            <span>  // this is a looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line </span>
        </span>
    </code>
  </pre>
</div>

and here is the rendered output:

and here is the rended output after adding width: fit-content to the <pre> element:

Additional Information:

When lineNos = true there are several additional element generated in a code block compared to when lineNos = false

When lineNos = true the classless <div> that immediately follows <div class="highlight"> can be assigned width: fit-content to resolve the issue described.

When lineNos = false, there are fewer additional elements generated. The described issue can be resolved by adding width: fit-content to the <pre> element.

[jmooring]

Rendering of fenced code blocks varies with:

• linenos = false
• linenos = inline (shorthand notation for lineNos=true and lineNumbersInTable=false)
• linenos = table (shorthand notation for lineNos=true and lineNumbersInTable=true)
• markup.highlight.noClasses = true vs. markup.highlight.noClasses = false
• Whether or not the content overflows the width of the container
• Whether or not one or more of the lines is highlighted

I use this CSS to produce the same visual output (approximately) for all combinations of the above:

main.css

/* Applies when there are no line numbers, or when line numbers are inline. */
.highlight > pre {
  padding: 1em 0 1em 1em;
}

/* Applies when line numbers are in a table cell. */
.highlight div {
  padding: 0 0 0 1em;
}

/* Applies to all. */
.highlight div,
.highlight > pre {
  overflow-x: auto;
  /* add border-radius and box-shadow here */
}

/* Applies when using an external style sheet. */
/* https://github.com/alecthomas/chroma/issues/722 */
.highlight .chroma .lntable .lnt,
.highlight .chroma .lntable .hl {
  display: flex;
}

/* Applies when using an external style sheet. */
/* https://github.com/alecthomas/chroma/issues/722 */
.highlight .chroma .lntable .lntd + .lntd {
  width: 100%;
}

Example:

git clone --single-branch -b hugo-github-issue-10723 https://github.com/jmooring/hugo-testing hugo-github-issue-10723
cd hugo-github-issue-10723
hugo server

There's an open issue upstream about one of the combinations, but otherwise I'm not sure this is actionable.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.