Skip to content

Update from code changes: document code block copy button CSS classes #7003

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
dks333 merged 1 commit into from
Aug 17, 2026
+8 −0
Merged

Update from code changes: document code block copy button CSS classes #7003

Show file tree
Hide file tree
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
2 changes: 2 additions & 0 deletions customize/custom-scripts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,8 @@
- `columns`: Multi-column layout wrapper.
- `code-block`: Code block element.
- `code-block-icon`: Icon displayed in a code block header.
- `code-block-copy-button`: Copy button shown on a code block. Hide it with `.code-block-copy-button { display: none; }`.
- `code-block-fade-overlay`: Fade overlay shown at the bottom of a collapsed code block.
- `code-group`: Tabbed group of code blocks.
- `expandable`: Expandable section element.
- `frame`: Frame wrapper for images or embedded content.
Expand Down Expand Up @@ -269,7 +271,7 @@
- `contextual-feedback-form-submit-button`: Submit button for the contextual feedback form.
</Accordion>
<Accordion title="Code snippet feedback">
- `code-snippet-feedback-popover-content`: Popover content for code snippet feedback.

Check warning on line 274 in customize/custom-scripts.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/custom-scripts.mdx#L274 

Use 'popover' instead of 'Popover'.
- `code-snippet-feedback-form`: Feedback form for a code snippet.
- `code-snippet-feedback-textarea`: Text area within the code snippet feedback form.
- `code-snippet-feedback-form-title`: Title of the code snippet feedback form.
Expand Down Expand Up @@ -416,7 +418,7 @@

If your site uses [authentication](/deploy/authentication-setup) or [personalization](/create/personalization), custom scripts can read the identified visitor from `window.mintlify.user`. This is the same object exposed to MDX pages as the [`user` variable](/create/personalization#dynamic-mdx-content), so it reflects the `content` field of your user data.

Because custom scripts run before user info resolves, listen for the `mintlify:user` event to identify when the user object is available. The event fires when user info resolves and again on any change. Its `detail` is the user object, or `null` when the visitor is signed out or unidentified.

Check warning on line 421 in customize/custom-scripts.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/custom-scripts.mdx#L421 

In general, use active voice instead of passive voice ('is signed').

```js Read the user after it resolves
window.addEventListener('mintlify:user', (event) => {
Expand All @@ -436,7 +438,7 @@
}
```

`window.mintlify.user` is `undefined` until user info resolves and when the visitor is signed out or unidentified. Use optional chaining when reading nested fields.

Check warning on line 441 in customize/custom-scripts.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/custom-scripts.mdx#L441 

In general, use active voice instead of passive voice ('is signed').

<Warning>
Client-side scripts can access anything you place in the user `content` field. Do not include secrets or credentials that shouldn't be readable in the browser.
Expand Down
2 changes: 2 additions & 0 deletions es/customize/custom-scripts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,8 @@ Pueden aparecer múltiples instancias de estos elementos en una página. Úsalos
- `columns`—Contenedor de diseño multicolumna.
- `code-block`—Elemento de bloque de código.
- `code-block-icon`—Icono mostrado en el encabezado de un bloque de código.
- `code-block-copy-button`—Botón de copia mostrado en un bloque de código. Ocúltalo con `.code-block-copy-button { display: none; }`.
- `code-block-fade-overlay`—Superposición de desvanecimiento mostrada en la parte inferior de un bloque de código contraído.
- `code-group`—Grupo con pestañas de bloques de código.
- `expandable`—Elemento de sección expandible.
- `frame`—Contenedor de marco para imágenes o contenido incrustado.
Expand Down
2 changes: 2 additions & 0 deletions fr/customize/custom-scripts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,8 @@ Plusieurs instances de ces éléments peuvent apparaître sur une page. Utilisez
- `columns`—Conteneur de mise en page multi-colonnes.
- `code-block`—Élément de bloc de code.
- `code-block-icon`—Icône affichée dans l'en-tête d'un bloc de code.
- `code-block-copy-button`—Bouton de copie affiché sur un bloc de code. Masquez-le avec `.code-block-copy-button { display: none; }`.
- `code-block-fade-overlay`—Superposition de fondu affichée au bas d'un bloc de code réduit.
- `code-group`—Groupe d'onglets de blocs de code.
- `expandable`—Élément de section extensible.
- `frame`—Cadre pour les images ou le contenu intégré.
Expand Down
2 changes: 2 additions & 0 deletions zh/customize/custom-scripts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,8 @@ Mintlify 提供两种类型的 CSS 定位钩子：
- `columns`—多列布局容器。
- `code-block`—代码块元素。
- `code-block-icon`—代码块头部显示的图标。
- `code-block-copy-button`—代码块上显示的复制按钮。可通过 `.code-block-copy-button { display: none; }` 隐藏。
- `code-block-fade-overlay`—折叠代码块底部显示的渐隐遮罩。
- `code-group`—带标签页的代码块组。
- `expandable`—可展开区域元素。
- `frame`—用于图片或嵌入内容的框架容器。
Expand Down