Update diff colors (#4747)

Co-authored-by: Jacob Richman <[email protected]>

1 files changed, 35 insertions, 10 deletions

diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx
index 38dc49d4..58b32c7e 100644
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/packages/cli/src/ui/utils/CodeColorizer.tsx
@@ -88,6 +88,34 @@ function renderHastNode(
   return null;
 }
 
+function highlightAndRenderLine(
+  line: string,
+  language: string | null,
+  theme: Theme,
+): React.ReactNode {
+  try {
+    const getHighlightedLine = () =>
+      !language || !lowlight.registered(language)
+        ? lowlight.highlightAuto(line)
+        : lowlight.highlight(language, line);
+
+    const renderedNode = renderHastNode(getHighlightedLine(), theme, undefined);
+
+    return renderedNode !== null ? renderedNode : line;
+  } catch (_error) {
+    return line;
+  }
+}
+
+export function colorizeLine(
+  line: string,
+  language: string | null,
+  theme?: Theme,
+): React.ReactNode {
+  const activeTheme = theme || themeManager.getActiveTheme();
+  return highlightAndRenderLine(line, language, activeTheme);
+}
+
 /**
  * Renders syntax-highlighted code for Ink applications using a selected theme.
  *
@@ -123,11 +151,6 @@ export function colorizeCode(
       }
     }
 
-    const getHighlightedLines = (line: string) =>
-      !language || !lowlight.registered(language)
-        ? lowlight.highlightAuto(line)
-        : lowlight.highlight(language, line);
-
     return (
       <MaxSizedBox
         maxHeight={availableHeight}
@@ -136,17 +159,19 @@ export function colorizeCode(
         overflowDirection="top"
       >
         {lines.map((line, index) => {
-          const renderedNode = renderHastNode(
-            getHighlightedLines(line),
+          const contentToRender = highlightAndRenderLine(
+            line,
+            language,
             activeTheme,
-            undefined,
           );
 
-          const contentToRender = renderedNode !== null ? renderedNode : line;
           return (
             <Box key={index}>
               <Text color={activeTheme.colors.Gray}>
-                {`${String(index + 1 + hiddenLinesCount).padStart(padWidth, ' ')} `}
+                {`${String(index + 1 + hiddenLinesCount).padStart(
+                  padWidth,
+                  ' ',
+                )} `}
               </Text>
               <Text color={activeTheme.defaultColor} wrap="wrap">
                 {contentToRender}