fix(CodeBlocks): make highlight lines become selective

issue #776
sabertazimi · May 3, 2022 · 6cb8451 · 6cb8451
1 parent 501ef50
commit 6cb8451
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 222 deletions.
diff --git a/components/CodeBlocks/BlockCode.module.css b/components/CodeBlocks/BlockCode.module.css
@@ -1,5 +1,4 @@
 .code {
-  @apply static;
   @apply mb-0 px-0 py-5;
 }
 
@@ -9,26 +8,29 @@
 
 .hover,
 .highlight {
-  @apply absolute;
-  @apply w-full h-full;
+  @apply border-l-4 border-solid;
+}
+
+.hover {
+  @apply border-transparent;
 }
 
-.hover:hover,
 .highlight {
-  @apply bg-gray-100/10;
+  @apply border-l-primary;
 }
 
+.hover:hover,
 .highlight {
-  @apply border-l-4 border-solid border-l-primary;
+  @apply bg-gray-100/10;
 }
 
 .number {
   @apply inline-block;
   @apply w-6;
-  @apply ml-5 mr-3;
+  @apply ml-4 mr-3;
   @apply text-secondary select-none;
 }
 
 .placeholder {
-  @apply ml-5;
+  @apply ml-4;
 }
diff --git a/components/CodeBlocks/BlockCode.tsx b/components/CodeBlocks/BlockCode.tsx
@@ -26,12 +26,14 @@ const BlockCode = ({
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={classNames(className, styles.code)} style={style}>
           {tokens.map((line, index) => (
-            <div key={index} {...getLineProps({ line, key: index })}>
-              {lines.has(index + 1) ? (
-                <span className={styles.highlight}></span>
-              ) : (
-                <span className={styles.hover}></span>
+            <div
+              key={index}
+              {...getLineProps({ line, key: index })}
+              className={classNames(
+                'token-line',
+                lines.has(index + 1) ? styles.highlight : styles.hover
               )}
+            >
               {enableLine ? (
                 <span className={styles.number}>{index + 1}</span>
               ) : (

diff --git a/components/CodeBlocks/LiveCode.test.tsx b/components/CodeBlocks/LiveCode.test.tsx
@@ -4,7 +4,7 @@ import LiveCode from './LiveCode';
 describe('LiveCode', () => {
   test('should render live code correctly (snapshot)', () => {
     const { container } = render(
-      <LiveCode className="language-type">Live Code</LiveCode>
+      <LiveCode className="language-type" code="Live Code" />
     );
 
     expect(container).toMatchSnapshot();

diff --git a/components/CodeBlocks/LiveCode.tsx b/components/CodeBlocks/LiveCode.tsx
@@ -3,13 +3,13 @@ import styles from './LiveCode.module.css';
 import { normalizeCode } from './utils';
 
 interface Props {
-  children?: string;
+  code?: string;
   className?: string;
 }
 
-const LiveCode = ({ children, className }: Props): JSX.Element => (
+const LiveCode = ({ code, className }: Props): JSX.Element => (
   <pre className={classNames(className, styles.code)}>
-    {normalizeCode(children)}
+    {normalizeCode(code)}
   </pre>
 );
 

diff --git a/components/CodeBlocks/Pre.tsx b/components/CodeBlocks/Pre.tsx
@@ -38,7 +38,7 @@ const Pre = ({
     >
       {!nocopy ? <CopyButton code={code} /> : null}
       {live ? (
-        <LiveCode className={languageClass}>{code}</LiveCode>
+        <LiveCode code={code} className={languageClass} />
       ) : (
         <BlockCode
           enableLine={!noline}