Split up code classnames

haydenbleasel · Feb 8, 2025 · c93d7c0 · c93d7c0
1 parent 22d70e0
commit c93d7c0
Showing 1 changed file with 28 additions and 14 deletions.
diff --git a/packages/code-block/index.tsx b/packages/code-block/index.tsx
@@ -452,23 +452,17 @@ export const CodeBlockContent = ({
     'dark:[&_.shiki_span]:![text-decoration:var(--shiki-dark-text-decoration)]'
   );
 
-  const codeBlockClassName = cn(
-    'mt-0 text-sm',
-    '[&_pre]:py-4',
-    '[&_.shiki]:!bg-[var(--shiki-bg)]',
-    '[&_code]:w-full',
-    '[&_code]:grid',
-    '[&_code]:overflow-x-auto',
-    '[&_.line]:px-4',
-    '[&_.line]:w-full',
-    '[&_.line]:relative',
+  const lineHighlightClassNames = cn(
     '[&_.line.highlighted]:bg-blue-50',
     '[&_.line.highlighted]:after:bg-blue-500',
     '[&_.line.highlighted]:after:absolute',
     '[&_.line.highlighted]:after:left-0',
     '[&_.line.highlighted]:after:top-0',
     '[&_.line.highlighted]:after:bottom-0',
-    '[&_.line.highlighted]:after:w-0.5',
+    '[&_.line.highlighted]:after:w-0.5'
+  );
+
+  const lineDiffClassNames = cn(
     '[&_.line.diff]:after:absolute',
     '[&_.line.diff]:after:left-0',
     '[&_.line.diff]:after:top-0',
@@ -477,10 +471,30 @@ export const CodeBlockContent = ({
     '[&_.line.diff.add]:bg-emerald-50',
     '[&_.line.diff.add]:after:bg-emerald-500',
     '[&_.line.diff.remove]:bg-rose-50',
-    '[&_.line.diff.remove]:after:bg-rose-500',
-    '[&_.highlighted-word]:bg-blue-50',
+    '[&_.line.diff.remove]:after:bg-rose-500'
+  );
+
+  const lineFocusedClassNames = cn(
     '[&_code:has(.focused)_.line]:blur-[2px]',
-    '[&_code:has(.focused)_.line.focused]:blur-none',
+    '[&_code:has(.focused)_.line.focused]:blur-none'
+  );
+
+  const wordHighlightClassNames = cn('[&_.highlighted-word]:bg-blue-50');
+
+  const codeBlockClassName = cn(
+    'mt-0 text-sm',
+    '[&_pre]:py-4',
+    '[&_.shiki]:!bg-[var(--shiki-bg)]',
+    '[&_code]:w-full',
+    '[&_code]:grid',
+    '[&_code]:overflow-x-auto',
+    '[&_.line]:px-4',
+    '[&_.line]:w-full',
+    '[&_.line]:relative',
+    lineHighlightClassNames,
+    lineDiffClassNames,
+    lineFocusedClassNames,
+    wordHighlightClassNames,
     lineNumbers && lineNumberClassNames,
     darkModeClassNames,
     className