fix(line-numbers): reset table styles, adjust column width (#254)

* chore: fix typos * fix(line-numbers): reset table styles, adjust column width * test: update snapshot
metonym · Dec 30, 2022 · a477780 · a477780
1 parent 280ac45
commit a477780
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -170,7 +170,7 @@ Use the `LineNumbers` component to render the highlighted code with line numbers
 
 ```svelte
 <script>
-  import Hightlight, { LineNumbers } from "svelte-highlight";
+  import Highlight, { LineNumbers } from "svelte-highlight";
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
 
@@ -225,7 +225,7 @@ Use `--style-props` to customize styles.
     {highlighted}
     --line-number-color="pink"
     --border-color="rgba(255, 255, 255, 0.2)"
-    --padding-left="0"
+    --padding-left={0}
     --padding-right="3em"
   />
 </Highlight>

diff --git a/demo/lib/LineNumbers/Basic.svelte b/demo/lib/LineNumbers/Basic.svelte
@@ -6,7 +6,7 @@
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
 
   const code = `<script>
-  import Hightlight, { LineNumbers } from "svelte-highlight";
+  import Highlight, { LineNumbers } from "svelte-highlight";
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
 

diff --git a/src/LineNumbers.svelte b/src/LineNumbers.svelte
@@ -60,8 +60,8 @@
 
   export let wrapLines = false;
 
-  const DIGIT_WIDTH = 18;
-  const MIN_DIGITS = 3;
+  const DIGIT_WIDTH = 12;
+  const MIN_DIGITS = 2;
 
   $: lines = highlighted.split("\n");
   $: len_digits = lines.length.toString().length;
@@ -70,7 +70,7 @@
 </script>
 
 <div style:overflow-x="auto" {...$$restProps}>
-  <table style:width="100%">
+  <table>
     <tbody class:hljs={true}>
       {#each lines as line, i}
         {@const lineNumber = i + 1}
@@ -87,7 +87,6 @@
             style:padding-top={isFirst ? "1em" : undefined}
             style:padding-bottom={isLast ? "1em" : undefined}
             style:width={width + "px"}
-            style:min-width={width + "px"}
           >
             <code style:color="var(--line-number-color, currentColor)">
               {lineNumber}
@@ -103,6 +102,25 @@
 </div>
 
 <style>
+  pre {
+    margin: 0;
+  }
+
+  table,
+  tr,
+  td {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    vertical-align: baseline;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
   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,8 +61,8 @@ describe("SvelteHighlight", () => {
 
     expect(target.querySelector("#line-numbers")?.innerHTML)
       .toMatchInlineSnapshot(`
-      "<div style=\\"overflow-x: auto;\\" class=\\"svelte-1gt16c9\\"><table style=\\"width: 100%;\\"><tbody class=\\"hljs\\"><tr><td class=\\"svelte-1gt16c9 hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; padding-top: 1em; padding-bottom: 1em; width: 54px; min-width: 54px;\\"><code>1</code></td> <td class=\\"svelte-1gt16c9\\"><pre class=\\"svelte-1gt16c9\\"><code>
-      </code></pre></td> </tr></tbody></table></div>"
-    `);
+        "<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>
+        </code></pre></td> </tr></tbody></table></div>"
+      `);
   });
 });