Skip to content

Fix code block copy button #1385

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

Open
sfc-gh-dmatthews wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix code block copy button #1385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63ff7f8
Fix code block copy button
sfc-gh-dmatthews Dec 8, 2025
b920215
Add custom code style for RefCard
sfc-gh-dmatthews Dec 8, 2025
e64c197
Change code blocks with theme
sfc-gh-dmatthews Dec 8, 2025
0cd96e3
Merge branch 'main' into fix/code-block-copy
sfc-gh-dmatthews Dec 8, 2025
426aba8
Unify syntax highlighting color; update light mode
sfc-gh-dmatthews Dec 8, 2025
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
64 changes: 13 additions & 51 deletions components/blocks/autofunction.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
}

.CodeBlockContainer pre {
@apply p-4 bg-gray-90 text-white font-medium rounded-xl relative py-6 px-8 leading-relaxed;
@apply p-4 bg-gray-10 text-gray-80 font-medium rounded-xl relative leading-relaxed;
}

.CodeBlockContainer pre code {
Expand All @@ -85,62 +85,14 @@
}

.CodeBlockContainer button span {
@apply absolute right-10 text-white font-mono text-sm tracking-tight font-normal opacity-0;
@apply absolute right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
}

.CodeBlockContainer button:hover span {
@apply opacity-100;
}

/* Code block adjustments */
.CodeBlockContainer pre code :global(.decorator.annotation.punctuation) {
@apply text-red-50;
}

.CodeBlockContainer pre code :global(.operator) {
@apply text-yellow-50;
}

.CodeBlockContainer pre code :global(.decorator) {
@apply text-yellow-80;
}

.CodeBlockContainer pre code :global(.keyword) {
@apply text-darkBlue-50;
}

.CodeBlockContainer pre code :global(.builtin) {
@apply text-lightBlue-40;
}

.CodeBlockContainer pre code :global(.string) {
@apply text-green-80;
}

.CodeBlockContainer pre code :global(.number),
.CodeBlockContainer pre code :global(.boolean) {
@apply text-green-40;
}

.CodeBlockContainer pre code :global(.function) {
@apply text-red-50;
}

.CodeBlockContainer pre code :global(.punctuation) {
@apply text-gray-60;
}

.CodeBlockContainer pre code :global(.comment) {
@apply text-gray-60 italic font-normal;
}

.CodeBlockContainer pre code :global(.string) {
@apply text-darkBlue-30;
}

.CodeBlockContainer pre code :global(.table) {
@apply inline;
}
/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */

/* Styles for deprecation notice in param */
.DeprecatedContent {
Expand Down Expand Up @@ -175,3 +127,13 @@
:global(.dark) .Keyword::after {
@apply bg-gray-80 text-gray-30;
}

/* Dark mode for code blocks */
:global(.dark) .CodeBlockContainer pre {
@apply bg-gray-90 text-white;
}

/* Dark mode button text */
:global(.dark) .CodeBlockContainer button span {
@apply text-white;
}
49 changes: 38 additions & 11 deletions components/blocks/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,14 @@ import styles from "./code.module.css";
// Initialize the cache for imported languages.
const languageImports = new Map();

const Code = ({ code, children, language, img, lines }) => {
const Code = ({
code,
children,
language,
img,
lines,
hideCopyButton = false,
}) => {
// Create a ref for the code element.
const codeRef = useRef(null);

Expand Down Expand Up @@ -49,9 +56,17 @@ const Code = ({ code, children, language, img, lines }) => {
);
}
}
// Only highlight the current code block.
// Highlight the code block and conditionally enable toolbar plugins (including copy button)
if (codeRef.current) {
// First highlight the element
Prism.highlightElement(codeRef.current);
// Then activate toolbar plugins on the parent container if copy button is not hidden
if (!hideCopyButton) {
const container = codeRef.current.closest(`.${styles.Container}`);
if (container) {
Prism.highlightAllUnder(container);
}
}
}
}
}
Expand All @@ -70,33 +85,45 @@ const Code = ({ code, children, language, img, lines }) => {

if (img) {
ConditionalRendering = (
<section className={styles.Container}>
<section
className={classNames(styles.Container, {
[styles.NoCopyButton]: hideCopyButton,
})}
>
<Image src={img} clean={true} />
<div className={styles.Pre}>
<pre className={styles.Pre}>
<code ref={codeRef} className={languageClass}>
{customCode}
</code>
</div>
</pre>
</section>
);
} else if (lines) {
ConditionalRendering = (
<section className={classNames(styles.Container, styles.LineHighlight)}>
<div data-line={lines}>
<section
className={classNames(styles.Container, styles.LineHighlight, {
[styles.NoCopyButton]: hideCopyButton,
})}
>
<pre data-line={lines}>
<code ref={codeRef} className={languageClass}>
{customCode}
</code>
</div>
</pre>
</section>
);
} else {
ConditionalRendering = (
<section className={styles.Container}>
<div className={styles.Pre}>
<section
className={classNames(styles.Container, {
[styles.NoCopyButton]: hideCopyButton,
})}
>
<pre className={styles.Pre}>
<code ref={codeRef} className={languageClass}>
{customCode}
</code>
</div>
</pre>
</section>
);
}
Expand Down
Loading