refactor(chat): show inline code more subtle

[elianiva]

Context

I've been wanting to change this for a while. The current inline code feels a bit 'out of place', every time the LLM outputs them I find it hard to read and just clutters the chat.

Implementation

• Adjusted the monospace font to be slightly smaller than the rest because they tend to appear larger just a tiny bit.
• Adjusted the border colour so they are more subtle, the old one makes it as if these blocks are clickable and a separate element instead of just plain text with different styling

Screenshots

Epilepsy warning, I'm switching between multiple different themes (dark and light) to test it.

Before

Screencast.From.2025-04-18.13-45-17.mp4

After

Screencast.From.2025-04-18.13-45-53.mp4

How to Test

Try having a chat with the LLM and ask it to output some inline code

Get in Touch

@elianiva on Roocode discord server

---

Important

Refactor inline code styling in MarkdownBlock.tsx to be more subtle by adjusting font size and border color.

• Styling Changes:
  • In MarkdownBlock.tsx, adjusted code:not(pre > code) to have font-size: 0.9em for a slightly smaller appearance.
  • Changed border color of code:not(pre > code) to var(--vscode-tab-border, #424242) for a more subtle look.

^{This description was created by for 7791b8e. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 78f26bf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cte]

This bugs me too! Let's figure out the font size thing though.

[adamhill]

I like the font change!

One thing that helps me see the code (inline) with normal text is a much more vibrant / saturated color, especially in darker modes. (I have been trained by GH Copilot choices)

Are the chat blocks picking up the colors from the theme the user has selected? And would actual large code blocks pick up the theme proper from whatever component we use?

[elianiva]

I like the font change!

One thing that helps me see the code (inline) with normal text is a much more vibrant / saturated color, especially in darker modes. (I have been trained by GH Copilot choices)

Are the chat blocks picking up the colors from the theme the user has selected? And would actual large code blocks pick up the theme proper from whatever component we use?

i guess we need to figure out which token that consistently has bright/stand out colour across colourschemes

as for the codeblock, there is some work at #1328
i believe it will take the current theme since it uses shiki (which is using the same textmate grammar that vscode uses, so it will be compatible)

[elianiva]

i played with this a bit more, a few changes:

• reverted the font size change, apparently the bigger font size only happens on low resolution? not sure, but it doesn't happen now after I changed my monitor
• removed the border since it makes the inline code looks like its own entity, we can utilise borders for actually clickable items
• adjusted the foreground and background colour, now it's similar with Github copilot which IMO is better because it handles multiple themes better especially with the high contrast ones

I think this PR is ready for review.

updated preview:

Before

Screen.Recording.2025-05-02.at.00.31.55.mov

After

Screen.Recording.2025-05-02.at.00.30.01.mov

[cte]

I think this might be problematic if your VSCode user settings specify a much larger font size.

[cte]

Thanks!