fix(line-numbers): fixes to line numbers column (#271)

* Line numbers should not be covered by a solid fill, custom line background color * Line numbers column should not be covered by code if scrollable
metonym · Apr 1, 2023 · efd6750 · efd6750
1 parent 99db121
commit efd6750
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/LineNumbers.svelte b/src/LineNumbers.svelte
@@ -162,6 +162,10 @@
  padding-bottom: 1em;
  }
 
+ tr td:first-of-type {
+ z-index: 2;
+ }
+
  td {
  padding-left: var(--padding-left, 1em);
  padding-right: var(--padding-right, 1em);
@@ -182,10 +186,12 @@
  }
 
  td,
+ td > code,
  pre {
  position: relative;
  }
 
+ td > code,
  pre {
  z-index: 1;
  }

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-tjkhvl\\"><table class=\\"svelte-tjkhvl\\"><tbody class=\\"hljs\\"><tr class=\\"svelte-tjkhvl\\"><td class=\\"svelte-tjkhvl hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; width: 24px;\\"><code>1</code> </td> <td class=\\"svelte-tjkhvl\\"><pre class=\\"svelte-tjkhvl\\"><code>
+ "<div style=\\"overflow-x: auto;\\" class=\\"svelte-1vh31p0\\"><table class=\\"svelte-1vh31p0\\"><tbody class=\\"hljs\\"><tr class=\\"svelte-1vh31p0\\"><td class=\\"svelte-1vh31p0 hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; width: 24px;\\"><code class=\\"svelte-1vh31p0\\">1</code> </td> <td class=\\"svelte-1vh31p0\\"><pre class=\\"svelte-1vh31p0\\"><code>
  </code></pre> </td> </tr></tbody></table></div>"
  `);
  });