fix(line-numbers): correctly set top/bottom padding (#260)

Fixes #258
metonym · Jan 1, 2023 · 5da30c8 · 5da30c8
1 parent 9d9e3b0
commit 5da30c8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/LineNumbers.svelte b/src/LineNumbers.svelte
@@ -16,7 +16,7 @@
      * @default false
      */
     hideBorder?: boolean;
-    
+
     /**
      * Specify which starting line number should be displayed.
      * @default 1
@@ -65,7 +65,7 @@
   export let hideBorder = false;
 
   export let wrapLines = false;
-  
+
   export let startingLineNumber = 1;
 
   const DIGIT_WIDTH = 12;
@@ -82,8 +82,6 @@
     <tbody class:hljs={true}>
       {#each lines as line, i}
         {@const lineNumber = i + startingLineNumber}
-        {@const isFirst = i === 0}
-        {@const isLast = i === lines.length - 1}
         <tr>
           <td
             class:hljs={true}
@@ -92,8 +90,6 @@
             style:left="0"
             style:text-align="right"
             style:user-select="none"
-            style:padding-top={isFirst ? "1em" : undefined}
-            style:padding-bottom={isLast ? "1em" : undefined}
             style:width={width + "px"}
           >
             <code style:color="var(--line-number-color, currentColor)">
@@ -129,6 +125,14 @@
     border-spacing: 0;
   }
 
+  tr:first-of-type td {
+    padding-top: 1em;
+  }
+
+  tr:last-child td {
+    padding-bottom: 1em;
+  }
+
   td {
     padding-left: var(--padding-left, 1em);
     padding-right: var(--padding-right, 1em);

diff --git a/tests/SvelteHighlight.test.ts b/tests/SvelteHighlight.test.ts
@@ -61,7 +61,7 @@ describe("SvelteHighlight", () => {
 
     expect(target.querySelector("#line-numbers")?.innerHTML)
       .toMatchInlineSnapshot(`
-        "<div style=\\"overflow-x: auto;\\" class=\\"svelte-2e2lav\\"><table class=\\"svelte-2e2lav\\"><tbody class=\\"hljs\\"><tr class=\\"svelte-2e2lav\\"><td class=\\"svelte-2e2lav hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; padding-top: 1em; padding-bottom: 1em; width: 24px;\\"><code>1</code></td> <td class=\\"svelte-2e2lav\\"><pre class=\\"svelte-2e2lav\\"><code>
+        "<div style=\\"overflow-x: auto;\\" class=\\"svelte-1kmlnkb\\"><table class=\\"svelte-1kmlnkb\\"><tbody class=\\"hljs\\"><tr class=\\"svelte-1kmlnkb\\"><td class=\\"svelte-1kmlnkb hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; width: 24px;\\"><code>1</code></td> <td class=\\"svelte-1kmlnkb\\"><pre class=\\"svelte-1kmlnkb\\"><code>
         </code></pre></td> </tr></tbody></table></div>"
       `);
   });