diff options
Diffstat (limited to 'packages/cli/src/ui/utils')
| -rw-r--r-- | packages/cli/src/ui/utils/CodeColorizer.tsx | 45 |
1 files changed, 37 insertions, 8 deletions
diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx index 1916ff50..8f905498 100644 --- a/packages/cli/src/ui/utils/CodeColorizer.tsx +++ b/packages/cli/src/ui/utils/CodeColorizer.tsx @@ -94,16 +94,31 @@ export function colorizeCode( const activeTheme = themeManager.getActiveTheme(); try { - const hastTree = - !language || !lowlight.registered(language) - ? lowlight.highlightAuto(codeToHighlight) - : lowlight.highlight(language, codeToHighlight); - // Render the HAST tree using the adapted theme // Apply the theme's default foreground color to the top-level Text element + const lines = codeToHighlight.split('\n'); + const getHighlightedLines = (line: string) => + !language || !lowlight.registered(language) + ? lowlight.highlightAuto(line) + : lowlight.highlight(language, line); + return ( - <Text color={activeTheme.defaultColor}> - {renderHastNode(hastTree, activeTheme, undefined)} + <Text> + {lines.map((line, index) => ( + <Text key={index}> + <Text color={activeTheme.colors.SubtleComment}> + {`${String(index + 1).padStart(3, ' ')} `} + </Text> + <Text color={activeTheme.defaultColor}> + {renderHastNode( + getHighlightedLines(line), + activeTheme, + undefined, + )} + </Text> + {index < lines.length - 1 && '\n'} + </Text> + ))} </Text> ); } catch (error) { @@ -112,6 +127,20 @@ export function colorizeCode( error, ); // Fallback to plain text with default color on error - return <Text color={activeTheme.defaultColor}>{codeToHighlight}</Text>; + // Also display line numbers in fallback + const lines = codeToHighlight.split('\n'); + return ( + <Text> + {lines.map((line, index) => ( + <Text key={index}> + <Text color={activeTheme.colors.SubtleComment}> + {`${String(index + 1).padStart(3, ' ')} `} + </Text> + <Text color={activeTheme.defaultColor}>{line}</Text> + {index < lines.length - 1 && '\n'} + </Text> + ))} + </Text> + ); } } |
