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']}
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 />