Skip to content

Add copy-to-clipboard support to code blocks #1273

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.

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
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

DebugSteven
Copy link
Contributor

@DebugSteven DebugSteven commented Aug 6, 2025

Summary

This PR adds support for a copy option in code blocks. When this option is enabled, a copy-to-clipboard button is rendered in the top-right corner of the code block, allowing users to easily copy its contents.

User Experience

If a code block includes the copy keyword in the language line, a copy button will appear when the user hovers over the block. Clicking the button copies the full contents of the code block to the clipboard and displays a checkmark to confirm success.

Implementation Overview

  • In swift-docc, this change parses the copy option from the language line in triple-backtick code blocks.
  • A copyToClipboard property was added to RenderBlockContent.codeListing passed to the renderer.
  • This flag is forwarded to swift-docc-render. The accompanying branch/PR is here: Add copy-to-clipboard support to code blocks swift-docc-render#961

Dependencies

This PR depends on associated changes in swift-docc-render to actually render and handle the copy button.

Testing

Setup

  1. Use the codeblock-copy branches for swift-docc and swift-docc-render with the copy-to-clipboard changes.
  2. Rebuild documentation using swift-docc and serve it using a local build of swift-docc-render.

How to Test

  1. In any code listing using ``` or by adding a code listing, add the copy option like this:
```swift, copy
print(“Hello, world!”)
```


or like this:


```copy
print(“Hello, world!”)
```


2. Hover over the code block. A copy icon should appear in the top-right corner.
3. Click the copy icon. The code should be copied to your clipboard and the icon should update to a checkmark briefly. Paste to verify the copy functionality works.

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

  • Added tests – testCopyToClipboard() in RenderContentCompilerTests.swift
  • Ran the ./bin/test script and it succeeded
  • Updated documentation if necessary – I added copyToClipboard as a property of CodeListing in RenderNode.spec.json. I also added a subsection to Formatting Your Documentation Content. Please let me know if there’s any other documentation I should update.

@heckj
Copy link
Member

heckj commented Aug 6, 2025

@swift-ci please test

@d-ronnqvist d-ronnqvist added the needs forum discussion Needs to be discussed in the Swift Forums label Aug 7, 2025
@d-ronnqvist
Copy link
Contributor

Since this is adding new user-facing syntax I'm adding the needs-forum-discussion tag until the community has had time to discuss the new syntax.

@d-ronnqvist
Copy link
Contributor

There is a forum thread for this here. It would be good for that thread to cover some discussion on future directions so that we feel comfortable that this syntax can scale to accommodate those future directions (or intentionally not support them if we believe that each would benefit from a different user-facing syntax).

@heckj heckj self-assigned this Aug 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs forum discussion Needs to be discussed in the Swift Forums
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants