Skip to content

Commit 929c866

Browse files
committed
document expand button feature
1 parent c8728b1 commit 929c866

File tree

1 file changed

+12
-1
lines changed
  • fern/products/docs/pages/component-library/default-components

1 file changed

+12
-1
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,10 @@ a `maxLines` attribute after the language identifier. The
121121
`maxLines` attribute should be a number representing the maximum
122122
number of lines to display. By default, the code block will display up to 20 lines.
123123

124+
When you use `maxLines`, an expand button automatically appears on hover in the top-right corner, allowing users to view the full code content in an expanded overlay that displays over the page.
125+
124126
<Tabs>
125-
<Tab title="Example">
127+
<Tab title="Example: maxLines=10">
126128
```python maxLines=10
127129
def is_prime(num):
128130
"""Check if a number is prime."""
@@ -182,6 +184,15 @@ number of lines to display. By default, the code block will display up to 20 lin
182184
</Tab>
183185
</Tabs>
184186

187+
To hide the expand button or add custom styling, target the `.fern-expand-button` selector:
188+
189+
```css
190+
/* Hide the expand button */
191+
.fern-expand-button {
192+
display: none;
193+
}
194+
```
195+
185196
## Wrap overflow
186197

187198
By default, long lines that exceed the width of the code block become scrollable:

0 commit comments

Comments
 (0)