search

luizdepra / hugo-coder

A minimalist blog theme for hugo.
MIT License
2.69k stars 1.06k forks source link

div overflow when enabled markup.highlight.lineNos and markup.highlight.lineNumbersInTable #917

Open mchu1966 opened 3 months ago

mchu1966 commented 3 months ago

Describe the problem:

When I enabled the markup.highlight.lineNos and markup.highlight.lineNumbersInTable in hugo.toml, the syntax highlighting code block will overflow when the content is too long that exceed the div width.

Steps to reproduce:

  1. enable markup.highlight.lineNos and markup.highlight.lineNumbersInTable in hugo.toml 
    [markup.highlight]
lineNos = true
lineNumbersInTable = true
  2. create a syntax highlighting code block with long enough content

Observed Results:

if I turn the lineNumbersInTable to false, the overflowed part will be hidden.

longlineoverflow_disable_linenumbersintable

The code block should hide the overflowed element, and able to be scrolled horizontally to view the content.

longlineoverflow_scroll

I added a workaround to _base.scss, to get my expecting result

.highlight {
  div,
  pre {
    margin: 2rem 0 2rem;
    padding: 1rem;
    border-radius: 1rem;
    overflow: auto; // <- add this
  }
}

I'm not sure if it will cause any breaking changes, or anywhere else needed to be updated in order to fix it, so open a issue. Thanks for helping.

Relevant code exceptions or logs

N/A