From 6a53039be561ff59e714226aecea123f8f5ce45c Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Tue, 23 Sep 2025 14:50:47 -0400 Subject: [PATCH 1/4] document startLine --- .../default-components/code-blocks.mdx | 138 +++++++++++++++++- 1 file changed, 134 insertions(+), 4 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx index 38531fd45..0e2166fc4 100644 --- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx +++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx @@ -114,6 +114,136 @@ Instead of highlighting lines, you can focus on specific lines by adding a comme +## Start line + +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. + + + + ```javascript + console.log("Line 1"); + console.log("Line 2"); + console.log("Line 3"); + console.log("Line 4"); + console.log("Line 5"); + console.log("Line 6"); + console.log("Line 7"); + console.log("Line 8"); + console.log("Line 9"); + console.log("Line 10"); + console.log("Line 11"); + console.log("Line 12"); + console.log("Line 13"); + console.log("Line 14"); + console.log("Line 15"); + console.log("Line 16"); + console.log("Line 17"); + console.log("Line 18"); + console.log("Line 19"); + console.log("Line 20"); + console.log("Line 21"); + console.log("Line 22"); + console.log("Line 23"); + console.log("Line 24"); + console.log("Line 25") + ``` + + + ````markdown + ```javascript + console.log("Line 1"); + console.log("Line 2"); + console.log("Line 3"); + console.log("Line 4"); + console.log("Line 5"); + console.log("Line 6"); + console.log("Line 7"); + console.log("Line 8"); + console.log("Line 9"); + console.log("Line 10"); + console.log("Line 11"); + console.log("Line 12"); + console.log("Line 13"); + console.log("Line 14"); + console.log("Line 15"); + console.log("Line 16"); + console.log("Line 17"); + console.log("Line 18"); + console.log("Line 19"); + console.log("Line 20"); + console.log("Line 21"); + console.log("Line 22"); + console.log("Line 23"); + console.log("Line 24"); + console.log("Line 25") + ``` + ```` + + + + + + ```javascript startLine={8} + console.log("Line 1"); + console.log("Line 2"); + console.log("Line 3"); + console.log("Line 4"); + console.log("Line 5"); + console.log("Line 6"); + console.log("Line 7"); + console.log("Line 8"); + console.log("Line 9"); + console.log("Line 10"); + console.log("Line 11"); + console.log("Line 12"); + console.log("Line 13"); + console.log("Line 14"); + console.log("Line 15"); + console.log("Line 16"); + console.log("Line 17"); + console.log("Line 18"); + console.log("Line 19"); + console.log("Line 20"); + console.log("Line 21"); + console.log("Line 22"); + console.log("Line 23"); + console.log("Line 24"); + console.log("Line 25") + ``` + + + ````markdown + ```javascript startLine={8} + console.log("Line 1"); + console.log("Line 2"); + console.log("Line 3"); + console.log("Line 4"); + console.log("Line 5"); + console.log("Line 6"); + console.log("Line 7"); + console.log("Line 8"); + console.log("Line 9"); + console.log("Line 10"); + console.log("Line 11"); + console.log("Line 12"); + console.log("Line 13"); + console.log("Line 14"); + console.log("Line 15"); + console.log("Line 16"); + console.log("Line 17"); + console.log("Line 18"); + console.log("Line 19"); + console.log("Line 20"); + console.log("Line 21"); + console.log("Line 22"); + console.log("Line 23"); + console.log("Line 24"); + console.log("Line 25") + ``` + ```` + + + ## Max height 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 ## Combining props -You can combine the `title`, `highlight`, `focus`, `maxLines`, and `wordWrap` -props to create a code block with a title, highlighted lines, +You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, and `wordWrap` +props to create a code block with a title, highlighted lines, specific starting line, and a maximum height. - ```javascript title="Hello, World!" {2-4} maxLines=5 + ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} console.log("Line 1"); console.log("Line 2"); console.log("Line 3"); @@ -253,7 +383,7 @@ and a maximum height. ````markdown maxLines=5 - ```javascript title="Hello, World!" {2-4} maxLines=5 + ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} console.log("Line 1"); console.log("Line 2"); console.log("Line 3"); From 6c8f1248359bbe025058175742d6f3d6f1aa0626 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Tue, 23 Sep 2025 14:55:50 -0400 Subject: [PATCH 2/4] make example more concise --- .../default-components/code-blocks.mdx | 65 +------------------ 1 file changed, 1 insertion(+), 64 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx index 0e2166fc4..2c6d219fc 100644 --- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx +++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx @@ -119,70 +119,7 @@ Instead of highlighting lines, you can focus on specific lines by adding a comme 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. - - ```javascript - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - console.log("Line 6"); - console.log("Line 7"); - console.log("Line 8"); - console.log("Line 9"); - console.log("Line 10"); - console.log("Line 11"); - console.log("Line 12"); - console.log("Line 13"); - console.log("Line 14"); - console.log("Line 15"); - console.log("Line 16"); - console.log("Line 17"); - console.log("Line 18"); - console.log("Line 19"); - console.log("Line 20"); - console.log("Line 21"); - console.log("Line 22"); - console.log("Line 23"); - console.log("Line 24"); - console.log("Line 25") - ``` - - - ````markdown - ```javascript - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - console.log("Line 6"); - console.log("Line 7"); - console.log("Line 8"); - console.log("Line 9"); - console.log("Line 10"); - console.log("Line 11"); - console.log("Line 12"); - console.log("Line 13"); - console.log("Line 14"); - console.log("Line 15"); - console.log("Line 16"); - console.log("Line 17"); - console.log("Line 18"); - console.log("Line 19"); - console.log("Line 20"); - console.log("Line 21"); - console.log("Line 22"); - console.log("Line 23"); - console.log("Line 24"); - console.log("Line 25") - ``` - ```` - - - - - + ```javascript startLine={8} console.log("Line 1"); console.log("Line 2"); From 410968f4cda41f63da766d5f4a3ee0f7c26349f2 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Tue, 23 Sep 2025 14:59:56 -0400 Subject: [PATCH 3/4] fix --- .../pages/component-library/default-components/code-blocks.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx index 2c6d219fc..5417de0f7 100644 --- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx +++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx @@ -120,7 +120,7 @@ You can control which line appears first in your code block by adding a `startLi - ```javascript startLine={8} + ```javascript startLine={6} console.log("Line 1"); console.log("Line 2"); console.log("Line 3"); From 2642cacf69d37de0771b74439fde0eb84fbfff4d Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Tue, 23 Sep 2025 15:13:45 -0400 Subject: [PATCH 4/4] add more lines to example --- .../default-components/code-blocks.mdx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx index 5417de0f7..f8dbcccfe 100644 --- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx +++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx @@ -145,12 +145,15 @@ You can control which line appears first in your code block by adding a `startLi console.log("Line 22"); console.log("Line 23"); console.log("Line 24"); - console.log("Line 25") + console.log("Line 25"); + console.log("Line 26"); + console.log("Line 27"); + console.log("Line 28") ``` ````markdown - ```javascript startLine={8} + ```javascript startLine={6} console.log("Line 1"); console.log("Line 2"); console.log("Line 3"); @@ -175,7 +178,10 @@ You can control which line appears first in your code block by adding a `startLi console.log("Line 22"); console.log("Line 23"); console.log("Line 24"); - console.log("Line 25") + console.log("Line 25"); + console.log("Line 26"); + console.log("Line 27"); + console.log("Line 28") ``` ````