feat(line-numbers): support highlighted lines (#266)

Closes #256
metonym · Feb 13, 2023 · 48c580d · 48c580d
1 parent 370e087
commit 48c580d
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -208,36 +208,54 @@ Set `wrapLines` to `true` to hide the border of the line numbers column.
 </Highlight>
 ```
 
-### Custom Styles
+### Custom Starting Line Number
 
-Use `--style-props` to customize styles.
+The line number starts at `1`. Customize this via the `startingLineNumber` prop.
 
-| Style prop          | Description                                | Default value  |
-| :------------------ | :----------------------------------------- | :------------- |
-| --line-number-color | Text color of the line numbers             | `currentColor` |
-| --border-color      | Border color of the column of line numbers | `currentColor` |
-| --padding-left      | Left padding for `td` elements             | `1em`          |
-| --padding-right     | Rightt padding for `td` elements           | `1em`          |
+```svelte
+<Highlight language={typescript} {code} let:highlighted>
+  <LineNumbers {highlighted} startingLineNumber={42} />
+</Highlight>
+```
+
+### Highlighted Lines
+
+Specify the lines to highlight using the `highlightedLines` prop. Indices start at zero.
+
+Use `--highlighted-background` to customize the background color of highlighted lines.
 
 ```svelte
 <Highlight language={typescript} {code} let:highlighted>
   <LineNumbers
     {highlighted}
-    --line-number-color="pink"
-    --border-color="rgba(255, 255, 255, 0.2)"
-    --padding-left={0}
-    --padding-right="3em"
+    highlightedLines={[0, 2, 3, 14]}
+    --highlighted-background="#000"
   />
 </Highlight>
 ```
 
-### Custom Starting Line Number
+### Custom Styles
 
-The line number starts at `1`. Customize this via the `startingLineNumber` prop.
+Use `--style-props` to customize styles.
+
+| Style prop               | Description                                | Default value             |
+| :----------------------- | :----------------------------------------- | :------------------------ |
+| --line-number-color      | Text color of the line numbers             | `currentColor`            |
+| --border-color           | Border color of the column of line numbers | `currentColor`            |
+| --padding-left           | Left padding for `td` elements             | `1em`                     |
+| --padding-right          | Right padding for `td` elements            | `1em`                     |
+| --highlighted-background | Background color of highlighted lines      | `rgba(254, 241, 96, 0.2)` |
 
 ```svelte
 <Highlight language={typescript} {code} let:highlighted>
-  <LineNumbers {highlighted} startingLineNumber={42} />
+  <LineNumbers
+    {highlighted}
+    --line-number-color="pink"
+    --border-color="rgba(255, 255, 255, 0.2)"
+    --padding-left={0}
+    --padding-right="3em"
+    --highlighted-background="#000"
+  />
 </Highlight>
 ```
 
@@ -378,12 +396,13 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
 
 #### Props
 
-| Name               | Type      | Default value  |
-| :----------------- | :-------- | :------------- |
-| highlighted        | `string`  | N/A (required) |
-| hideBorder         | `boolean` | `false`        |
-| wrapLines          | `boolean` | `false`        |
-| startingLineNumber | `number`  | `1`            |
+| Name               | Type       | Default value  |
+| :----------------- | :--------- | :------------- |
+| highlighted        | `string`   | N/A (required) |
+| hideBorder         | `boolean`  | `false`        |
+| wrapLines          | `boolean`  | `false`        |
+| startingLineNumber | `number`   | `1`            |
+| highlightedLines   | `number[]` | `[]`           |
 
 `$$restProps` are forwarded to the top-level `div` element.
 

diff --git a/demo/lib/LineNumbers/HighlightedLines.svelte b/demo/lib/LineNumbers/HighlightedLines.svelte
@@ -0,0 +1,8 @@
+<script>
+  // @ts-check
+  import Basic from "./Basic.svelte";
+
+  const snippet = "<LineNumbers {highlighted} highlightedLines={[0, 2, 3, 14]} />";
+</script>
+
+<Basic {snippet} highlightedLines={[0, 2, 3, 14]} />
diff --git a/demo/lib/LineNumbers/HighlightedLinesCustomColor.svelte b/demo/lib/LineNumbers/HighlightedLinesCustomColor.svelte
@@ -0,0 +1,9 @@
+<script>
+  // @ts-check
+  import Basic from "./Basic.svelte";
+
+  const snippet =
+    '<LineNumbers {highlighted} highlightedLines={[1, 2]} --highlighted-background="#000" />';
+</script>
+
+<Basic {snippet} highlightedLines={[1, 2]} --highlighted-background="#000" />
diff --git a/demo/routes/+page.svelte b/demo/routes/+page.svelte
@@ -24,6 +24,8 @@
   import WrapLines from "lib/LineNumbers/WrapLines.svelte";
   import StyleProps from "lib/LineNumbers/StyleProps.svelte";
   import StartingLineNumber from "lib/LineNumbers/StartingLineNumber.svelte";
+  import HighlightedLines from "lib/LineNumbers/HighlightedLines.svelte";
+  import HighlightedLinesCustomColor from "lib/LineNumbers/HighlightedLinesCustomColor.svelte";
 
   const NAME = process.env.NAME;
 
@@ -238,6 +240,24 @@
   <Column xlg={12}>
     <StartingLineNumber />
   </Column>
+  <Column xlg={9} lg={12}>
+    <p class="mb-5">
+      Use <code class="code">highlightedLines</code> to highlight specific lines.
+      Indices start at zero.
+    </p>
+  </Column>
+  <Column xlg={12}>
+    <HighlightedLines />
+  </Column>
+  <Column xlg={9} lg={12}>
+    <p class="mb-5">
+      Use <code class="code">--highlighted-background</code> to customize the background
+      color of highlighted lines.
+    </p>
+  </Column>
+  <Column xlg={12}>
+    <HighlightedLinesCustomColor />
+  </Column>
 </Row>
 
 <Row>

diff --git a/src/LineNumbers.svelte b/src/LineNumbers.svelte
@@ -29,6 +29,13 @@
      */
     wrapLines?: boolean;
 
+    /**
+     * Specify the line indices to highlight.
+     * @default []
+     * @example [0, 1, 9]
+     */
+    highlightedLines?: number[];
+
     /**
      * Specify the text color for line numbers.
      * Defaults to the current theme color applied to `.hljs code`.
@@ -58,6 +65,13 @@
      * @example 0
      */
     "--padding-right"?: number | string;
+
+    /**
+     * Specify the background color of highlighted lines.
+     * @default "rgba(254, 241, 96, 0.2)"
+     * @example "#fff"
+     */
+    "--highlighted-background"?: string;
   }
 
   export let highlighted: $$Props["highlighted"];
@@ -68,8 +82,11 @@
 
   export let startingLineNumber = 1;
 
+  export let highlightedLines = [];
+
   const DIGIT_WIDTH = 12;
   const MIN_DIGITS = 2;
+  const HIGHLIGHTED_BACKGROUND = "rgba(254, 241, 96, 0.2)";
 
   $: lines = highlighted.split("\n");
   $: len_digits = lines.length.toString().length;
@@ -95,9 +112,21 @@
             <code style:color="var(--line-number-color, currentColor)">
               {lineNumber}
             </code>
+            {#if highlightedLines.includes(i)}
+              <div
+                class:line-background={true}
+                style:background="var(--highlighted-background, {HIGHLIGHTED_BACKGROUND})"
+              />
+            {/if}
           </td>
           <td>
             <pre class:wrapLines><code>{@html line || "\n"}</code></pre>
+            {#if highlightedLines.includes(i)}
+              <div
+                class:line-background={true}
+                style:background="var(--highlighted-background, {HIGHLIGHTED_BACKGROUND})"
+              />
+            {/if}
           </td>
         </tr>
       {/each}
@@ -151,4 +180,35 @@
   .wrapLines {
     white-space: pre-wrap;
   }
+
+  td,
+  pre {
+    position: relative;
+  }
+
+  pre {
+    z-index: 1;
+  }
+
+  .line-background {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  tr:first-of-type td .line-background,
+  tr:last-of-type td .line-background {
+    height: calc(100% - 1em);
+  }
+
+  tr:first-of-type td .line-background {
+    top: 1em;
+  }
+
+  tr:last-of-type td .line-background {
+    bottom: 1em;
+  }
 </style>
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-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>"
+        "<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>
+        </code></pre> </td> </tr></tbody></table></div>"
       `);
   });
 });