Skip to content

feat: add line numbers and horizontal scroll to code blocks #704

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
hankkyy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add line numbers and horizontal scroll to code blocks #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 11 additions & 0 deletions src/renderer/src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2920,6 +2920,7 @@ body {
.chat-code-block {
border-radius: 6px;
overflow: hidden;
overflow-x: auto;
margin: 6px 0 !important;
Comment on lines 2920 to 2924

@greptile-apps greptile-apps Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 overflow: hidden masked by overflow-x: auto

Setting overflow-x: auto immediately after overflow: hidden silently changes the computed value to overflow-x: auto; overflow-y: hidden. The overflow: hidden was placed here to clip children to the border-radius: 6px box (a common CSS idiom). The intent of this PR — scrolling the code area — is already fully satisfied by the overflow-x: auto rule on the inner pre/div selector on line 2969. Because the inner element contains its own overflow, the outer .chat-code-block never actually overflows, making this outer overflow-x: auto redundant. Consider removing the new line here and keeping overflow: hidden intact to preserve the clear original intent.

}

Expand Down Expand Up @@ -2965,6 +2966,16 @@ body {
margin: 0 !important;
padding: 12px !important;
background: var(--code-bg) !important;
overflow-x: auto;
}

/* Line numbers inside code blocks */
.chat-code-block .linenumber {
min-width: 2.5em;
padding-right: 1em;
color: #636d83;
user-select: none;
text-align: right;
}

.chat-code-block span[class*="token"] {
Expand Down
15 changes: 15 additions & 0 deletions src/renderer/src/components/AgentMarkdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,27 @@ function CodeBlock({
style={_oneDark}
language={language || "text"}
PreTag="div"
showLineNumbers={code.split("\n").length > 1}
wrapLines={true}
Comment on lines +111 to +112

@greptile-apps greptile-apps Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 wrapLines should be conditional, matching showLineNumbers

wrapLines={true} wraps every source line in an extra <span> block, which adds DOM nodes even for single-line code blocks where showLineNumbers evaluates to false and the line-wrapping spans serve no purpose. Aligning the two props eliminates unnecessary overhead for single-line snippets.

Suggested change
showLineNumbers={code.split("\n").length > 1}
wrapLines={true}
showLineNumbers={code.split("\n").length > 1}
wrapLines={code.split("\n").length > 1}

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

lineNumberStyle={{
minWidth: "2.5em",
paddingRight: "1em",
color: "#636d83",
userSelect: "none",
textAlign: "right",
}}
Comment on lines +113 to +119

@greptile-apps greptile-apps Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 Duplicate line-number styles — inline wins, CSS becomes dead code

The five properties declared in lineNumberStyle (minWidth, paddingRight, color, userSelect, textAlign) are identical to the properties in .chat-code-block .linenumber added in main.css. React inline styles have higher specificity than any CSS class rule, so the CSS rule is effectively unreachable and will never be applied. Consider picking one approach — either keep the inline lineNumberStyle and remove the CSS rule, or remove the inline object and rely entirely on the CSS class — to avoid a maintenance footgun where future edits to the CSS silently have no effect.

customStyle={{
margin: 0,
borderRadius: 0,
fontSize: "13px",
padding: "12px",
background: "transparent",
overflowX: "auto",
}}
codeTagProps={{
style: {
whiteSpace: "pre",
},
}}
>
{code}
Expand Down
Loading