diff --git a/docs/js/extra.js b/docs/js/extra.js
new file mode 100644
index 000000000000..bee4e49f840c
--- /dev/null
+++ b/docs/js/extra.js
@@ -0,0 +1,43 @@
+function cleanupClipboardText(targetSelector) {
+  const targetElement = document.querySelector(targetSelector);
+
+  // exclude "Generic Prompt" and "Generic Output" spans from copy
+  const excludedClasses = ["gp", "go"];
+
+  const clipboardText = Array.from(targetElement.childNodes)
+    .filter(node => !excludedClasses.some((className) => node?.classList?.contains(className)))
+    .map(node => node.textContent)
+    .filter(s => s != "");
+  return clipboardText.join("").trim();
+}
+
+// Sets copy text to attributes lazily using an Intersection Observer.
+function setCopyText() {
+  // The `data-clipboard-text` attribute allows for customized content in the copy
+  // See: https://www.npmjs.com/package/clipboard#copy-text-from-attribute
+  const attr = 'clipboardText';
+  // all "copy" buttons whose target selector is a <code> element
+  const elements = document.querySelectorAll(
+      'button.md-clipboard[data-clipboard-target$="code"]'
+  );
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      // target in the viewport that have not been patched
+      if (entry.intersectionRatio > 0 && entry.target.dataset[attr] === undefined) {
+        entry.target.dataset[attr] = cleanupClipboardText(entry.target.dataset.clipboardTarget);
+      }
+    });
+  });
+
+  elements.forEach(elt => {
+    observer.observe(elt);
+  });
+}
+
+// Using the document$ observable is particularly important if you are using instant loading since
+// it will not result in a page refresh in the browser
+// See `How to integrate with third-party JavaScript libraries` guideline:
+// https://squidfunk.github.io/mkdocs-material/customization/?h=javascript#additional-javascript
+document$.subscribe(function() {
+  setCopyText();
+})
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index e339ba4a426e..565a760597e0 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -124,3 +124,7 @@ This is a consequence of the reduced nav spacing below. */
 .md-nav--secondary .md-nav__link {
   margin-top: 0.5em;
 }
+/* See: https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
+.highlight .gp, .highlight .go { /* Generic.Prompt, Generic.Output */
+    user-select: none;
+}
diff --git a/mkdocs.template.yml b/mkdocs.template.yml
index 18c07c975ea5..c1d7ce376d01 100644
--- a/mkdocs.template.yml
+++ b/mkdocs.template.yml
@@ -64,6 +64,8 @@ plugins:
   - typeset
 extra_css:
   - stylesheets/extra.css
+extra_javascript:
+  - js/extra.js
 extra:
   analytics:
     provider: fathom