Merge pull request #14 from croossin/roo/bug/highlight-margin

Highlight margin bug fix
croossin · Dec 29, 2023 · 4e1ebf6 · 4e1ebf6
2 parents 278779b + a4a2ada
commit 4e1ebf6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/fix-margin-bug.md b/.changeset/fix-margin-bug.md
@@ -0,0 +1,5 @@
+---
+"@roo-app/react-code-block": patch
+---
+
+Fix a bug in which the line number would be off centered if that line was selected to be highlighted. [Issue here](https://github.com/croossin/react-code-block/issues/10).
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
   "module": "dist/react-code-block.esm.js",
   "scripts": {
     "release": "yarn run build && changeset publish",
-    "start": "tsdx watch",
+    "dev": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",

diff --git a/src/index.tsx b/src/index.tsx
@@ -117,7 +117,14 @@ function CodeBlock({
                           )}
                           <div className="px-4">
                             {showLineNumbers && (
-                              <span className="mr-4 select-none">{i + 1}</span>
+                              <span
+                                className={clsx(
+                                  "select-none",
+                                  shouldHighlight ? "-ml-1 mr-5" : "mr-4"
+                                )}
+                              >
+                                {i + 1}
+                              </span>
                             )}
                             {line.map((token, key) => (
                               <span key={key} {...getTokenProps({ token })} />