Repository navigation
Markdown code not showing properly #192
Description
Description
The <code> CSS on the page causes problems in design on large and small screens - for example, check out this screenshot:
...and this video on mobile (causes unwanted escaping of the layout horizontally and unexpected left-right scrolling):
@karlhorky has suggested the following CSS changes to improve this design, inspired by GitHub's CSS for <code> elements:
code { font-size: 0.9em; padding: 0.15em 0.3em; border-radius: 6px; max-width: 100%; }
a code { color: var(--wp--preset--color--brand-links); text-decoration: underline; }
I added as a custom CSS for now, and would appreciate it if you could add it as a permanent fix.
Steps to reproduce
No response
What you expected to happen
No response
What actually happened
No response
Reacted by Karl Horky
Reacted by Karl Horky
Activity
karlhorky commentedon May 21, 2025
@nickvidal thanks for opening the issue here! 🙌
To be clear for any implementors, the
max-width: 100%;declaration is for forcing the wrapping on the<code>elements, which is required in addition to the existingword-wrap: break-word;on*, *:before, *:after.Also, I'm happy to do a PR for this, if someone can point me towards the right file and guide me on the style.