Code
A component to display highlighted code.
$ import { Code } from 'geist-ui-svelte'; Basic
We use shikiji under the hood for extremely accurate and beautiful syntax highlighting.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
With Edit highlighting
Edit highlighting can be useful when showing differences in code. Use type
`add` or `remove` to indicate a code addition or code removal.
1
2
3
-
4
+
5
6
1
2
3
+
4
+
5
+
6
+
7
8
9
10
11
12
Multi-line highlighting
Sometimes you may want to highlight a block of code. You can do this using
`start` and `end` if no end is specified then it will highlight until the
end of the code.
1
2
3
-
4
+
5
+
6
+
7
+
8
+
9
10
1
2
3
4
5
+
6
7
8
9
10
11
12
13
14
15
16
Without line numbers
Remove the line numbers with `lineNumbers=false` to save space on the page or if
its more your style.
Last ModeSelector
Next Snippet