Code block highlighting issue on mobile resolution about mkdocs-material HOT 14 CLOSED

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.

from mkdocs-material.

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.

from mkdocs-material.

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 ☺️

from mkdocs-material.

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

from mkdocs-material.

Released as part of 9.5.18.

from mkdocs-material.

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. 🙏🏻

from mkdocs-material.

@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

from mkdocs-material.

@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.

from mkdocs-material.

@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...

from mkdocs-material.

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

from mkdocs-material.

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

from mkdocs-material.

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.

from mkdocs-material.

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

from mkdocs-material.

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

from mkdocs-material.