Line Numbers

The Highlight component has the option to add line numbers. See the following examples.

Number Lines

Add numberLine props to add line numbers.

1 
<Highlight
2 
  language={typescript}
3 
  code={test1}
4 
  numberLine
5 
/>
6 
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
7 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
8 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />

Hide Border

Add hideBorder props to hide the border.

1 
<Highlight
2 
  language={typescript}
3 
  code={test2}
4 
  hideBorder
5 
  numberLine
6 
/>
7 
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
8 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
9 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />

Wraped Lines

Add wrapLines props to wrap lines.

1 
<Highlight
2 
  language={typescript}
3 
  code={test3}
4 
  wrapLines
5 
  numberLine
6 
/>
7 
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
8 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
9 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />

Starting Line Number

Use the startingLineNumber props to set the start line number.

42 
<Highlight
43 
  language={typescript}
44 
  code={test4}
45 
  startingLineNumber={42}
46 
  numberLine
47 
/>
48 
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
49 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
50 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />

Highlighted Lines and Highlighted Background

Use the highlightedLines and highlightedBackground props to highlight lines.

1 
<Highlight
2 
  language={typescript}
3 
  code={modules['./samples/sample-5.svelte'] as string}
4 
  highlightedLines={[2, 4]}
5 
  --highlighted-background="#666"
6 
  numberLine
7 
/>
8 
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
9 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
10 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />

Custom styles

Use the --line-number-color , --border-color , --padding-left , --padding-right , and --highlighted-background props to customize the styles.

1 
<Highlight
2 
  language={typescript}
3 
  code={modules['./samples/sample-6.svelte'] as string}
4 
  highlightedLines={[1, 3]}
5 
  --line-number-color="pink"
6 
  --border-color="rgba(25, 155, 55, 1)"
7 
  --padding-left={0}
8 
  --padding-right="3em"
9 
  --highlighted-background="#6e6e6e"
10 
  numberLine
11 
/>
12 
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
13 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
14 
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />