Skip to content

Commit 6a53039

Browse files
devalogdevalog
committed
document startLine
1 parent 159ccd2 commit 6a53039

File tree

1 file changed

+134
-4
lines changed
  • fern/products/docs/pages/component-library/default-components

1 file changed

+134
-4
lines changed

‎fern/products/docs/pages/component-library/default-components/code-blocks.mdx‎

Lines changed: 134 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,136 @@ Instead of highlighting lines, you can focus on specific lines by adding a comme
114114
</Tab>
115115
</Tabs>
116116

117+
## Start line
118+
119+
You can control which line appears first in your code block by adding a `startLine` attribute after the language identifier. This is particularly useful for longer code snippets where you want to highlight the main logic while still providing the complete context.
120+
121+
<Tabs>
122+
<Tab title="Example: Without startLine">
123+
```javascript
124+
console.log("Line 1");
125+
console.log("Line 2");
126+
console.log("Line 3");
127+
console.log("Line 4");
128+
console.log("Line 5");
129+
console.log("Line 6");
130+
console.log("Line 7");
131+
console.log("Line 8");
132+
console.log("Line 9");
133+
console.log("Line 10");
134+
console.log("Line 11");
135+
console.log("Line 12");
136+
console.log("Line 13");
137+
console.log("Line 14");
138+
console.log("Line 15");
139+
console.log("Line 16");
140+
console.log("Line 17");
141+
console.log("Line 18");
142+
console.log("Line 19");
143+
console.log("Line 20");
144+
console.log("Line 21");
145+
console.log("Line 22");
146+
console.log("Line 23");
147+
console.log("Line 24");
148+
console.log("Line 25")
149+
```
150+
</Tab>
151+
<Tab title="Markdown">
152+
````markdown
153+
```javascript
154+
console.log("Line 1");
155+
console.log("Line 2");
156+
console.log("Line 3");
157+
console.log("Line 4");
158+
console.log("Line 5");
159+
console.log("Line 6");
160+
console.log("Line 7");
161+
console.log("Line 8");
162+
console.log("Line 9");
163+
console.log("Line 10");
164+
console.log("Line 11");
165+
console.log("Line 12");
166+
console.log("Line 13");
167+
console.log("Line 14");
168+
console.log("Line 15");
169+
console.log("Line 16");
170+
console.log("Line 17");
171+
console.log("Line 18");
172+
console.log("Line 19");
173+
console.log("Line 20");
174+
console.log("Line 21");
175+
console.log("Line 22");
176+
console.log("Line 23");
177+
console.log("Line 24");
178+
console.log("Line 25")
179+
```
180+
````
181+
</Tab>
182+
</Tabs>
183+
184+
<Tabs>
185+
<Tab title="Example: With startLine">
186+
```javascript startLine={8}
187+
console.log("Line 1");
188+
console.log("Line 2");
189+
console.log("Line 3");
190+
console.log("Line 4");
191+
console.log("Line 5");
192+
console.log("Line 6");
193+
console.log("Line 7");
194+
console.log("Line 8");
195+
console.log("Line 9");
196+
console.log("Line 10");
197+
console.log("Line 11");
198+
console.log("Line 12");
199+
console.log("Line 13");
200+
console.log("Line 14");
201+
console.log("Line 15");
202+
console.log("Line 16");
203+
console.log("Line 17");
204+
console.log("Line 18");
205+
console.log("Line 19");
206+
console.log("Line 20");
207+
console.log("Line 21");
208+
console.log("Line 22");
209+
console.log("Line 23");
210+
console.log("Line 24");
211+
console.log("Line 25")
212+
```
213+
</Tab>
214+
<Tab title="Markdown">
215+
````markdown
216+
```javascript startLine={8}
217+
console.log("Line 1");
218+
console.log("Line 2");
219+
console.log("Line 3");
220+
console.log("Line 4");
221+
console.log("Line 5");
222+
console.log("Line 6");
223+
console.log("Line 7");
224+
console.log("Line 8");
225+
console.log("Line 9");
226+
console.log("Line 10");
227+
console.log("Line 11");
228+
console.log("Line 12");
229+
console.log("Line 13");
230+
console.log("Line 14");
231+
console.log("Line 15");
232+
console.log("Line 16");
233+
console.log("Line 17");
234+
console.log("Line 18");
235+
console.log("Line 19");
236+
console.log("Line 20");
237+
console.log("Line 21");
238+
console.log("Line 22");
239+
console.log("Line 23");
240+
console.log("Line 24");
241+
console.log("Line 25")
242+
```
243+
````
244+
</Tab>
245+
</Tabs>
246+
117247
## Max height
118248

119249
You can control the max height of the code block by adding
@@ -232,13 +362,13 @@ To disable scrolling and wrap overflow onto the next line, use the `wordWrap` pr
232362

233363
## Combining props
234364

235-
You can combine the `title`, `highlight`, `focus`, `maxLines`, and `wordWrap`
236-
props to create a code block with a title, highlighted lines,
365+
You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, and `wordWrap`
366+
props to create a code block with a title, highlighted lines, specific starting line,
237367
and a maximum height.
238368

239369
<Tabs>
240370
<Tab title="Example">
241-
```javascript title="Hello, World!" {2-4} maxLines=5
371+
```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4}
242372
console.log("Line 1");
243373
console.log("Line 2");
244374
console.log("Line 3");
@@ -253,7 +383,7 @@ and a maximum height.
253383
</Tab>
254384
<Tab title = "Markdown">
255385
````markdown maxLines=5
256-
```javascript title="Hello, World!" {2-4} maxLines=5
386+
```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4}
257387
console.log("Line 1");
258388
console.log("Line 2");
259389
console.log("Line 3");

0 commit comments

Comments
 (0)