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 />
|
9 |
|
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 />
|
10 |
|
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 />
|
10 |
|
Background color
1 | <Highlight
|
2 | language={typescript}
|
3 | code={modules['./md/sample-1.md'] as string}
|
4 | numberLine
|
5 | backgroudColor="red"
|
6 | />
|
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 />
|
11 |
|
Position
Use one of 'static' | 'relative' | 'abolute' | 'sticky' | undefined. The default value is
'sticky'.
1 | <Highlight
|
2 | language={typescript}
|
3 | code={modules['./md/position-static.md'] as string}
|
4 | numberLine
|
5 | backgroudColor="#326bfc"
|
6 | position="static"
|
7 | />
|
8 |
|
9 | <Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
|
10 | <Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
|
11 | <Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />
|
12 |
|
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 />
|
51 |
|
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 />
|
11 |
|
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 />
|
15 |
|