fix(chat): invert syntax highlighting in user message code blocks

[fbricon]

• fix(chat): invert syntax highlighting in user message code blocks
  User message bubbles use bg-primary which inverts the app theme, so
  code snippet highlighting colors need to be swapped accordingly to
  remain readable in both light and dark modes.

Hex values are defined once as --hljs-light-* / --hljs-dark-* palette
variables and referenced via var() in all theme blocks. These colors
follow the GitHub syntax highlighting scheme and don't map to the
project's tailwind color palette, so they are kept self-contained in
syntax-highlighting.css rather than registered in the ColorRegistry.

• fix(chat): wrap long lines in code blocks instead of overflowing

Fixes #1190

[coderabbitai]

📝 Walkthrough

Walkthrough

Add overflow clipping to chat message text containers; make Markdown code blocks wrap and break long words; refactor Highlight.js CSS to define light/dark palettes and add user-scoped variable overrides that invert syntax colors for user message code blocks.

Changes

Cohort / File(s)	Summary
Message Container Styling packages/renderer/src/lib/chat/components/messages/preview-message.svelte	Added overflow-hidden Tailwind class to the wrapper for rendered text parts to enforce clipping.
Markdown Rendering packages/renderer/src/lib/markdown/Markdown.svelte	Updated code block CSS to include white-space: pre-wrap and word-wrap: break-word so long lines and words wrap inside <pre> blocks.
Syntax Highlighting / Theme Palette packages/renderer/src/lib/markdown/syntax-highlighting.css	Replaced direct highlight color assignments with light/dark palette variables (--hljs-light-*, --hljs-dark-*) and remapped runtime --hljs-* variables; added [data-role='user'] overrides to invert highlight palette inside user message blocks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix(chat): enable scrolling in input field and fix height reset #1143: Touches the same preview-message component and modifies edit-button rendering/visibility — potential merge conflict area.
• feat(chat): add syntax highlighting for code blocks #1109: Modifies markdown syntax-highlighting and rendering CSS that this change further refactors and extends with user-scoped overrides.
• fix: show reasoning before response and improve streaming indicators #1173: Alters the same preview-message component's rendering/streaming logic; overlap with the added CSS class may require coordination.

Suggested labels

area/chat

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: inverting syntax highlighting in user message code blocks to fix readability issues.
Linked Issues check	✅ Passed	The PR directly addresses issue #1190 by inverting syntax highlighting colors in user message code blocks and wrapping long lines, meeting both stated requirements.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing syntax highlighting readability and line wrapping in user message code blocks; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly describes the changes made: inverting syntax highlighting in user message code blocks and wrapping long lines in code blocks instead of overflowing.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[benoitf]

do you think it can use css variables defined

usually we don't hardcode any color in the code, colors are coming from color-registry (defining variables) that rely on tailwind-color-palette stuff

[fbricon]

I've tweaked the css variables a bit, but moving to the color registry doesn't seem to be a good idea according to claude:

me: could we add the hljs values in tailwind-color-palette.json and then benefit from the color
registry?

claude Opus: Not cleanly, because of the user message inversion requirement.

The ColorRegistry provides one value per color based on the active theme — e.g., --pd-hljs-comment
would be #6a737d in light mode or #8b949e in dark mode. But for user messages, we need both light
and dark values available simultaneously so we can swap them. The registry doesn't expose the
"other theme's" values.

To work around it, we'd have to register each color twice:
this.registerColor('hljs-light-comment', { dark: '#6a737d', light: '#6a737d' });
this.registerColor('hljs-dark-comment', { dark: '#8b949e', light: '#8b949e' });

That misuses the registry — the light/dark fields would have identical values since we're
registering palette entries, not themed colors. We'd still need the CSS inversion logic in
syntax-highlighting.css to swap them for [data-role='user'].

So the current approach (self-contained CSS variables) is the better fit here.