hl_lines highlight background doesn't extend to scrollable area in code blocks

[Wcowin]

Context

When using hl_lines to highlight specific lines in a code block, the highlight background only covers the initially visible portion. When the code content is wider than the container and users scroll horizontally, the highlight background does not extend into the overflow area, making the highlighting appear incomplete and visually broken.

Description

In the current CSS, code uses display: block, so its width equals the pre container width. The .hll class (used for highlighting) also uses display: block, meaning its width is constrained by the container. When code lines exceed the container width and horizontal scrolling occurs, the .hll background cannot extend into the scrolled area.

Related links

• Requesting a change

Use Cases

Just add the following CSS：

/* Let pre handle horizontal scrolling */
.md-typeset .highlight pre,
.md-typeset pre {
  overflow-x: auto;
}

/* code width = actual content width, not container width */
.md-typeset pre > code {
  display: inline-block;
  min-width: 100%;
  vertical-align: top;
}

/* hll fills full code width, extending to scrollable area */
.md-typeset .highlight .hll,
.md-typeset pre code .hll {
  display: block;
}

Visuals

Before:

After:

https://wcowin.work/blog/Mkdocs/linktech/

Before submitting

• I have read and followed the change request guidelines.
• I have verified that my idea is a change request and not a bug report.
• I have ensured that, to the best of my knowledge, my idea will benefit the entire community.
• I have included relevant links to the documentation and related issues, to underline the need for my idea.

[squidfunk]

Thanks for suggesting. Moving to UI repository.