Skip to content

docs: mention copy button and fade overlay CSS hooks on Format code page #7004

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

Closed
mintlify wants to merge 1 commit into from
Closed

docs: mention copy button and fade overlay CSS hooks on Format code page #7004

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
4 changes: 3 additions & 1 deletion create/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`).

Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Code blocks are copyable, and if you have the assistant enabled, users can ask the assistant to explain the code.

To style or hide the copy button, target the `code-block-copy-button` [element selector](/customize/custom-scripts#element-selectors) in custom CSS. For example, hide the copy button with `.code-block-copy-button { display: none; }`.

Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.

<CodeGroup>
Expand Down Expand Up @@ -309,7 +311,7 @@ sayHello();

### Expandable

Allow users to expand and collapse long code blocks using `expandable`.
Allow users to expand and collapse long code blocks using `expandable`. While collapsed, a fade overlay appears at the bottom of the code block. Style it by targeting the `code-block-fade-overlay` [element selector](/customize/custom-scripts#element-selectors) in custom CSS.

<CodeGroup>

Expand Down