Skip to content

fix(claude): syntax highlighting #2233

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.

Sign up for GitHub

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

Open
craciu25yt wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(claude): syntax highlighting #2233

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53a919a
Fixes codeblocks color highlights
craciu25yt Apr 26, 2026
4e2c3fc
fixes border radius
craciu25yt Apr 26, 2026
990aa0f
Update styles/claude/catppuccin.user.less
craciu25yt Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 20 additions & 13 deletions styles/claude/catppuccin.user.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,44 +91,51 @@
nav.\!bg-bg-200 {
background: @mantle !important;
}
/* Target the specific element with all those classes */

.text-text-500.font-small.p-3\.5.pb-0 {
background-color: @crust !important;
/* Optional: Add padding or border-radius if the bg looks cramped */
border-radius: 8px 8px 0px 0px !important;
}
Comment on lines +94 to +100
Copy link
Copy Markdown
Member

@uncenter uncenter Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/* Target the specific element with all those classes */
.text-text-500.font-small.p-3\.5.pb-0 {
background-color: @crust !important;
/* Optional: Add padding or border-radius if the bg looks cramped */
border-radius: 8px 8px 0px 0px !important;
}

I'm not sure what this is for. Please isolate this to a separate pull request (this one should just be for the syntax highlighting fix) and provide a clearer description of where this is and what it changes - can we get a screenshot of what it looked like before this change and what it looks like after?

Copy link
Copy Markdown
Author

@craciu25yt craciu25yt May 2, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that is also realted to the upper discussion
{6299E0FE-CEE6-4873-AA15-CE2A76404C24}
{C557F63A-7F26-4D46-8009-B5F2013203BF}
these two are removing .text-text-500.font-small.p-3\.5.pb-0

image this one `.code-block`'s `border-radius: 0px 0px 8px 8px !important; ` (a slight radius is seen, making it seem weird)

Copy link
Copy Markdown
Author

@craciu25yt craciu25yt May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe the way I've done it its not the best as I'm not very good at css so any improvement feedback is accepted

/* Code blocks */
.code-block__code {
background: @crust !important;
border-radius: 0px 0px 8px 8px !important;
Copy link
Copy Markdown
Member

@uncenter uncenter Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't set non-color properties. As outlined in our contributing guidelines, we prohibit opinionated changes. https://userstyles.catppuccin.com/contributing/#opinionated-changes

Suggested change
border-radius: 0px 0px 8px 8px !important;

Copy link
Copy Markdown
Author

@craciu25yt craciu25yt May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that was because if not the colour was not displayed correctly
{80CE8B94-8505-4474-AF43-06685233D8A7}
{8F241401-E023-4B89-87A7-6190DAE0610F}

Copy link
Copy Markdown
Author

@craciu25yt craciu25yt May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think thats opinated, its just filling the box as it shows up
{1F7A2708-EE7F-4D41-8F9D-4E4914EAA266}
normally


code {
/* Default color */
span {
color: @text !important;
}

/* Green */
span.token[style="color: rgb(152, 195, 121);"] {
/* Green - strings */
span.token[style="color: rgb(155, 233, 99);"] {
color: @green !important;
}

/* Yellow */
span.token[style="color: rgb(209, 154, 102);"] {
/* Yellow - types */
span.token[style="color: rgb(251, 173, 96);"] {
color: @yellow !important;
}

/* Blue */
span.token[style="color: rgb(97, 175, 239);"] {
/* Blue - functions */
span.token[style="color: rgb(112, 184, 255);"] {
color: @blue !important;
}

/* Red */
span.token[style="color: rgb(224, 108, 117);"] {
color: @red !important;
/* Cyan - constants / nunmbers */
span.token[style="color: rgb(94, 237, 237);"] {
color: @sky !important;
Comment thread
craciu25yt marked this conversation as resolved.
Outdated
}

/* Magenta */
span.token[style="color: rgb(198, 120, 221);"] {
/* Magenta - built in functions / keywords */
span.token[style="color: rgb(204, 123, 244);"] {
color: @mauve !important;
}

/* Gray */
span.token[style="color: rgb(171, 178, 191);"] {
/* Gray - comments */
span.token[style="color: rgb(129, 136, 152);"] {
color: @overlay2 !important;
}
}
Expand Down
Loading