New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Code block highlighting issue on mobile resolution #7043
Comments
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. 🙏🏻 |
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. |
@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 |
Thanks for reporting and providing the reproduction! Turns out we already fixed this in Insiders when we implemented markdown_extensions:
- pymdownx.superfences
- pymdownx.highlight:
line_spans: __span With |
Additional note: I just checked and we already recommend setting |
@squidfunk Thank you, Martin. I really appreciate your instant response. I've had |
@squidfunk, I installed the latest commit and added the |
@alexvoss here's the modified reproduction that "works on my machine": |
No wait, you're right – the CSS was missing 😅 I mixed up the Insiders and community edition, stupid me. Fixed in 4eb1a43. |
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... |
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. |
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... |
In 10 years, we're probably all completely automated by AI, so I'm not sure it'll pay off 😅 |
Released as part of 9.5.18. |
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
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
The text was updated successfully, but these errors were encountered: