Syntax highlighting code fences causes content to fill page width

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">

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.


$ hugo env
hugo v0.108.0+extended darwin/amd64 BuildDate=unknown

This happens with footnotes too:

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

I cannot reproduce either of these behaviors.

Are you using someone else’s theme?

1 Like

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

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