Line highlighting now takes ranges

apps/webapp/app/components/code/CodeBlock.tsx

@@ -30,7 +30,7 @@ type CodeBlockProps = {
   showLineNumbers?: boolean;
 
   /** Highlight line at given line number with color from theme.colors */
-  highlightLines?: number[];
+  highlightedRanges?: [number, number][];
 
   /** Add/override classes on the overall element */
   className?: string;
@@ -154,7 +154,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     {
       showCopyButton = true,
       showLineNumbers = true,
-      highlightLines,
+      highlightedRanges,
       code,
       className,
       language = "typescript",
@@ -189,6 +189,10 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
       }rem + 1.5rem )`;
     }
 
+    const highlightLines = highlightedRanges?.flatMap(([start, end]) =>
+      Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    );
+
     return (
       <div
         className={cn(

apps/webapp/app/components/stories/CodeBlock.stories.tsx

@@ -32,7 +32,10 @@ export const Block: Story = {
     console.info(log);
   },
 });`,
-    highlightLines: [2],
+    highlightedRanges: [
+      [6, 8],
+      [12, 14],
+    ],
   },
 
   render: (args) => <CodeBlock {...args} />,