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