Skip to content

Commit 984a6b1

Browse files
authored
add docs for codeblock line highlight (#310)
1 parent 4c1183d commit 984a6b1

File tree

1 file changed

+27
-1
lines changed

1 file changed

+27
-1
lines changed

content/components/code.mdx

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,36 @@ const hello = "world";
6666
```
6767
````
6868

69+
## Line Highlighting
70+
71+
You can highlight specific lines in your code blocks by adding a special comment after the language identifier. Use curly braces `{}` and specify line numbers or ranges separated by commas.
72+
73+
```javascript Line Highlighting Example {1,3-5}
74+
const greeting = "Hello, World!";
75+
function sayHello() {
76+
console.log(greeting);
77+
}
78+
sayHello();
79+
```
80+
81+
````md
82+
```javascript Line Highlighting Example {1,3-5}
83+
const greeting = "Hello, World!";
84+
function sayHello() {
85+
console.log(greeting);
86+
}
87+
sayHello();
88+
```
89+
````
90+
6991
## Code Groups
7092

7193
Want to display multiple code examples in one code box? Check out the Code Group docs:
7294

73-
<Card title="Code Group" href="/content/components/code-groups" icon="columns-3">
95+
<Card
96+
title="Code Group"
97+
href="/content/components/code-groups"
98+
icon="columns-3"
99+
>
74100
Read the reference for the Code Group component
75101
</Card>

0 commit comments

Comments
 (0)