diff options
Diffstat (limited to 'packages/cli/src/ui/utils')
| -rw-r--r-- | packages/cli/src/ui/utils/CodeColorizer.tsx | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx index 8f905498..b56c83f4 100644 --- a/packages/cli/src/ui/utils/CodeColorizer.tsx +++ b/packages/cli/src/ui/utils/CodeColorizer.tsx @@ -97,6 +97,7 @@ export function colorizeCode( // 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 padWidth = String(lines.length).length; // Calculate padding width based on number of lines const getHighlightedLines = (line: string) => !language || !lowlight.registered(language) ? lowlight.highlightAuto(line) @@ -107,7 +108,7 @@ export function colorizeCode( {lines.map((line, index) => ( <Text key={index}> <Text color={activeTheme.colors.SubtleComment}> - {`${String(index + 1).padStart(3, ' ')} `} + {`${String(index + 1).padStart(padWidth, ' ')} `} </Text> <Text color={activeTheme.defaultColor}> {renderHastNode( @@ -129,14 +130,15 @@ export function colorizeCode( // Fallback to plain text with default color on error // Also display line numbers in fallback const lines = codeToHighlight.split('\n'); + const padWidth = String(lines.length).length; // Calculate padding width based on number of lines return ( <Text> {lines.map((line, index) => ( <Text key={index}> - <Text color={activeTheme.colors.SubtleComment}> - {`${String(index + 1).padStart(3, ' ')} `} + <Text color={activeTheme.defaultColor}> + {`${String(index + 1).padStart(padWidth, ' ')} `} </Text> - <Text color={activeTheme.defaultColor}>{line}</Text> + <Text color={activeTheme.colors.SubtleComment}>{line}</Text> {index < lines.length - 1 && '\n'} </Text> ))} |