Skip to content

Document expandable code snippets (Docs) #622

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 27, 2025
Merged

Document expandable code snippets (Docs) #622

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion fern/products/docs/pages/component-library/default-components/code-blocks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,10 @@ a `maxLines` attribute after the language identifier. The
`maxLines` attribute should be a number representing the maximum
number of lines to display. By default, the code block will display up to 20 lines.

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.

<Tabs>
<Tab title="Example">
<Tab title="Example: maxLines=10">
```python maxLines=10
def is_prime(num):
"""Check if a number is prime."""
Expand Down Expand Up @@ -182,6 +184,15 @@ number of lines to display. By default, the code block will display up to 20 lin
</Tab>
</Tabs>

To hide the expand button or add custom styling, target the `.fern-expand-button` selector:

```css
/* Hide the expand button */
.fern-expand-button {
display: none;
}
```

## Wrap overflow

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