Code block highlighting issue on mobile resolution

[lnxpy]

Context

Python version: 3.11
Mkdocs-material version: 9.5.17
OS: MacOS Sonoma 14.4.1

Bug description

When the code inside a code block is a bit long (that makes it horizontally scrollable), the highlighted lines (via hl_lines="") break and don't cover the full width of the page.

Related links

• Reporting a bug

Reproduction

9.5.17-code-highlighting-issue.zip

Steps to reproduce

Create a code block with a long line highlighted with hl_lines="". View the code block in a lower screen size (like mobile) and you'll spot the issue.

Browser

Chrome, Brave

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[lnxpy]

Sorry if I haven't provided the exact required information. I feel like it's enough to report this bug as its reproduction is quite easy and straightforward. 🙏🏻

[alexvoss]

Please do help us investigate the problem by creating a minimal reproduction. This helps us rule out that it is a customization that is causing the issue for you. Also need to see what versions of things you are using. I have created a long line in one of my code examples and could not reproduce the problem.

There is a chance this is not an issue with Material for MkDocs but I'd be happy to have a look and narrow it down.

[lnxpy]

@alexvoss Thank you, Alex. I totally understand that. I just updated the issue opener comment. Hopefully, it meets the needs. Let me know if any other information is required. <3

[squidfunk]

Thanks for reporting and providing the reproduction! Turns out we already fixed this in Insiders when we implemented content.code.select, but forgot to merge this tiny fix into the community edition. The fix mandates that the line_spans setting of pymdownx.highlight is enabled, because otherwise it is just not possible with plain CSS to stretch highlighted lines to the entire width – the markup doesn't allow it. Thus, the configuration in mkdocs.yml needs to be:

markdown_extensions:
  - pymdownx.superfences
  - pymdownx.highlight:
      line_spans: __span

With line_spans enabled, and the fix I just pushed in 9d33f8a, the problem should be gone.

[squidfunk]

Additional note: I just checked and we already recommend setting line_spans in the code block configuration. It's always a good idea to check the recommended configuration of the components you're using, since they should include all of the necessary settings to get the most out of Material for MkDocs ☺️

[lnxpy]

@squidfunk Thank you, Martin. I really appreciate your instant response. I've had line_spans defined in my configs, but this delivery is gonna carry the fix I'm pretty sure.

[alexvoss]

@squidfunk, I installed the latest commit and added the line_spans to the mkdocs.yml but still see the same thing. Is it possible that some change in the CSS is also needed? I see the code element has the md-code__content class but don't see CSS rules attaching to this. Hope I am not holding the wrong end of the stick there...

[squidfunk]

@alexvoss here's the modified reproduction that "works on my machine":
9.5.17-code-highlighting-issue.zip

[squidfunk]

No wait, you're right – the CSS was missing 😅 I mixed up the Insiders and community edition, stupid me. Fixed in 4eb1a43.

[alexvoss]

Now you are messing with me ;o) All good, it works fine now. Thanks for the fix. I tried to figure out what was going on yesterday but did not get anywhere. I could see the long ling was overflowing a box but could not find where the width was actually defined. At least that is what I thought I saw. May need to do a proper CSS course at some point...

[squidfunk]

The fix is actually a hack, so I don't think there's any CSS course telling you how to achieve this with the present structure, which is dictated by the Markdown extensions that generate the markup from Markdown.

[alexvoss]

I was trying to figure out why the long code line was overflowing some given width but could not even find out where that width came from. Might have just been too late in the evening. Perhaps a CSS course, then, and 10 years of experience in web design...

[squidfunk]

In 10 years, we're probably all completely automated by AI, so I'm not sure it'll pay off 😅