feat: add `LineNumbers`

[metonym]

Closes #247, related #240

This adds support for line numbers.

Approach

Create a LineNumbers component to be composed with either Highlight, HighlightAuto, or HighlightSvelte. LineNumbers is its own component for performance reasons (i.e., do not punish consumers who do not use it with extra code).

Usage

highlighted code must be passed as prop to LineNumbers.

Basic

<script>
  import Hightlight, { LineNumbers } from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import atomOneDark from "svelte-highlight/styles/atom-one-dark";

  const code = "const add = (a: number, b: number) => a + b";
</script>

<svelte:head>
  {@html atomOneDark}
</svelte:head>

<Highlight language={typescript} {code} let:highlighted>
  <LineNumbers {highlighted} />
</Highlight>

Hidden Border

Set hideBorder to true to hide the border of the line numbers column.

<Highlight language={typescript} {code} let:highlighted>
  <LineNumbers {highlighted} hideBorder />
</Highlight>

Wrapped Lines

By default, overflowing horizontal content is contained by a scrollbar.

Set wrapLines to true to hide the border of the line numbers column.

<Highlight language={typescript} {code} let:highlighted>
  <LineNumbers {highlighted} wrapLines />
</Highlight>

Custom Styles

Use --style-props to customize the following visual properties:

• --line-number-color: text color of the line numbers
• --border-color: color of the line numbers column
• --padding-left: left padding for td elements
• --padding-right: right padding for td elements

<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"
  />
</Highlight>