Syntax highlighting code fences causes content to fill page width

support
1

It adds a style attribute to the outer div with a hard-coded width that is the exact max width of the parent element.

No syntax highlighting for code fence:

<pre tabindex="0">
  <code>
    ...

Syntax highlighting for code fence:

<div class="highlight" style="width: 1296px;">
  <code class="language-bash" data-lang="bash">
    ...

I expected this instead:

<div class="highlight">
  <code class="language-bash" data-lang="bash">
    ...

This causes layout problems for content.

Edit:

$ hugo env
hugo v0.108.0+extended darwin/amd64 BuildDate=unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.19.3"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
2

This happens with footnotes too:

<div class="footnotes" role="doc-endnotes" style="width: 1296px;">
  <hr>
  <ol>
    <li id="fn:1">
      <p>The above quote is excerpted from Rob Pike’s <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk</a> during Gopherfest, November 18, 2015.&nbsp;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
...
3

I cannot reproduce either of these behaviors.

Are you using someone else’s theme?

1 Like
4

My apologies! It seems a bug in a script was the culprit in both cases. It took a while to track down.

5

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