Fixed code highlighting bug

asyncapi · Dec 16, 2024 · 8c8c5ab · 8c8c5ab
1 parent dc7d0d3
commit 8c8c5ab
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/components/editor/CodeBlock.tsx b/components/editor/CodeBlock.tsx
@@ -275,20 +275,32 @@ export default function CodeBlock({
             lineNumberStyle={(lineNumber: number) => {
               const isHighlighted = highlightedLines && highlightedLines.includes(lineNumber);
 
-              return {
+              const styles = {
                 display: 'inline-block',
                 marginLeft: '16px',
                 paddingRight: '16px',
-                background: isHighlighted ? '#252f3f' : 'inherit',
+                backgroundColor: isHighlighted ? '#3e4d64' : '#252f3f',
                 color: isHighlighted ? '#A3ACAD' : '#8B9394'
               };
+
+              return styles;
             }}
             wrapLines={true}
             lineProps={(lineNumber: number) => {
               const isHighlighted = highlightedLines && highlightedLines.includes(lineNumber);
 
+              const style: React.CSSProperties = {
+                paddingRight: '2rem'
+              };
+
+              if (isHighlighted) {
+                style.display = 'block';
+                style.width = '100%';
+                style.backgroundColor = '#3e4d64';
+              }
+
               return {
-                className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`
+                style
               };
             }}
             codeTagProps={{