Skip to content

docs: add copy button to docs code blocks - #657

Open
SHYXIN wants to merge 1 commit into
huggingface:mainfrom
SHYXIN:fix/issue-343-docs-copy-button
Open

docs: add copy button to docs code blocks#657
SHYXIN wants to merge 1 commit into
huggingface:mainfrom
SHYXIN:fix/issue-343-docs-copy-button

Conversation

@SHYXIN

@SHYXIN SHYXIN commented Aug 25, 2026

Copy link
Copy Markdown

What changed

Adds a one-click Copy button to every code block in the docs content area (issue #343).

  • website/assets/js/copy-code.js (new): on DOMContentLoaded, injects a <button class="copy-btn"> into each .docs-content pre. Clicking copies the code via navigator.clipboard.writeText() and shows a brief Copied! confirmation (or Failed if the clipboard write is rejected).
  • website/assets/css/main.css: styles .copy-btn — absolutely positioned top-right, hidden until the parent <pre> is hovered or focused (keyboard accessible via :focus-visible), and flashes green on success. Docs code blocks get top padding so the button sits clear of the first line instead of overlapping it.
  • website/layouts/doc/single.html: loads the script only on doc pages through the existing scripts block in baseof.html, following the same Hugo Pipes pattern already used for nav-toggle.js (resources.Get "js/copy-code.js"js.Build | minify | fingerprint in production).

No new dependencies, and no impact on landing or other page types.

Related issue

Fixes #343

Test approach

  • node --check website/assets/js/copy-code.js passes (JS syntax valid).
  • Built locally with hugo --minify (Hugo extended 0.165.0): the site builds clean (35 pages), the copy-code asset is emitted (minified + fingerprinted), and it is loaded only on docs pages (the landing page does not reference it).
  • Verified the button visually with headless Edge: it appears on hover/focus, copies on click (Copied!), and — after the top-padding fix — no longer overlaps the first code line (measured: button bottom ≈ 569px < code top ≈ 580px). Screenshots for all three states are attached in the PR comment.

Checklist

  • Only files related to this task were changed
  • No Python/test changes needed (docs-site change only)
  • Follows the existing Hugo Pipes asset-loading convention
  • Visual result verified locally (hugo --minify build + screenshots in comment); maintainer review welcome

@SHYXIN
SHYXIN requested a review from alejandro-ao as a code owner August 25, 2026 09:00
@SHYXIN

SHYXIN commented Aug 25, 2026

Copy link
Copy Markdown
Author

Verification (local hugo --minify build, Hugo extended 0.165.0)

  • The Copy button is injected on docs pages only and is hidden until the parent <pre> is hovered or focused.
  • Top padding added to docs code blocks so the button sits in the clear space above the code and no longer overlaps the first line.
  • Clicking copies the code to the clipboard and the button flashes a "Copied!" confirmation.

Measured bounding boxes confirmed the button no longer overlaps the first code line (button bottom < code top).

Adds a one-click "Copy" button to every code block in the docs content
area. The button is hidden until the parent <pre> is hovered or focused,
and flashes a "Copied!" confirmation after a successful clipboard write.

Follows the existing Hugo Pipes pattern used for nav-toggle.js: the script
lives in assets/js/copy-code.js and is loaded only on doc pages via the
scripts block in layouts/doc/single.html.

The absolutely-positioned button could overlap the first line of code in
blocks whose opening line reached the right edge, so add top padding to docs
code blocks so the button sits in the clear space above the code.

Fixes huggingface#343
@SHYXIN
SHYXIN force-pushed the fix/issue-343-docs-copy-button branch from a2e0b25 to 1c799b2 Compare August 26, 2026 02:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

docs: add copy button to code blocks

1 participant