markup: improve code block readability and isolate copy button

[bigdeejay]

Fix #33197

---

Summary

This PR improves the rendering of code blocks in markdown content (e.g., README.md) for better readability and UI stability across screen sizes.

Problem

• Code blocks previously used soft wrapping (pre-wrap), which caused line breaks on narrow or mobile displays.
• This significantly reduced code readability.
• The copy button overlapped or misaligned when horizontal scrolling was applied, due to its placement inside the scrolling container.

Changes

• Updated HTML structure and CSS to:
  • Enable horizontal scrolling (overflow-x: auto) for code blocks
  • Prevent forced line-wrapping by setting white-space: pre
  • Move the copy button into a separate absolutely-positioned container, outside the scrollable area

Result

• Code remains readable on all screen sizes via scroll instead of wrapping
• Copy button is visually stable and no longer affected by code block overflow

Affected Files

• modules/highlight/highlight.go — changed rendered HTML structure
• modules/markup/markdown/markdown.go — passed format options
• web_src/css/markup/codecopy.css — copy button isolation
• web_src/css/markup/content.css — horizontal scroll and white-space handling
• web_src/js/markup/codecopy.ts — adjusted to handle isolated copy area

Notes

This is a UI/UX refinement that improves the usability of code blocks, especially for developers reading source code on mobile devices or narrow displays.

[kyeongkwan]

Awesome

[silverwind]

There are people who prefer to always wrap code (me), and ones who don't. I think instead of this, we need a per-user preference that controls whether we wrap code everywhere or not. Singling out these inline blocks to not wrap seems a bad solution to me, we should either wrap everything or nothing.

PS: Reason I prefer to always wrap is because I think vertical scrollbars are bad UX.

[bigdeejay]

To be clear, are you saying we should apply code wrapping consistently—either everywhere or nowhere—based on a user preference?

[wxiaoguang]

I can see indeed there are bugs in current layout and this PR's approach is overall right. However we need to improve more details to make the markup layout work for all cases, will try to figure out the details and make some changes here.

[wxiaoguang]

Old buggy result:

Let's clearly define all layouts:

[silverwind]

I guess we can have these scrolling for now, but in the future, we definitely want one or two per-user options:

• Wrap code in code views (is enabled)
• Wrap code in code blocks (was enabled, is disabled with this PR)

Personally, I prefer to always wrap, e.g. both options enabled.

[wxiaoguang]

I guess we can have these scrolling for now, but in the future, we definitely want one or two per-user options:

That's why I use different CSS classes for wrap/scroll, it's flexible enough and could be configurable in the future.

---

At the moment, default to "scroll" should be good enough for most users, because it is the GitHub's behavior.

[silverwind]

Did you test mermaid blocks? Loading state and rendering.

[wxiaoguang]

Did you test mermaid blocks? Loading state and rendering.

[wxiaoguang]

I noticed that a similar fix has already been merged into the main branch through another commit, which seems to reflect the ideas from this PR.

Which one? Maybe because you are working on the main branch in your fork, while Gitea repo's main branch doesn't contain any fix yet?

---

I didn't see any related commit on the upstream's main branch. When this PR would be merged (there will be a squash merge), you are the "author", not just only "co-author" 😄

[bigdeejay]

Thanks, that makes sense — I misunderstood the situation.
Sorry if that caused any confusion! 😅