[question] How to have a click to copy feature for code blocks ?

[aahnik]

I am curious to know how can I have click to copy button on the top right corner, using the read the docs theme

You can see an example here https://docs.pyrogram.org/

[waylan]

I'm assuming that is using a newer version of the theme. Out clone of the theme is based on an older version. We would need to update the theme to the newer version.

Although, that may not matter. Click to copy is generally a feature of a syntax highlighter and if we are using a different one, things may not work the same. However, that would require some investigation to determine how it is implemented there.

[squidfunk]

Material for MkDocs - a popular theme - integrates with Clipboard.js and supports this functionality out-of-the-box 😊

You can check the implementation - it’s easy to add with some extra JS!

[aahnik]

Material for mkdocs is a cool theme, and many modern projects use it. But I am still attracted to the old readthedocs theme.

How can I add the copy to clipboard feature there ?

Out clone of the theme is based on an older version. We would need to update the theme to the newer version.

How can I do this ? Can you please give link to relevant docs, so that I can learn about changing the theme ?

It would be great if mkdocs provides "copy to clipboard" for readthedocs theme, out of the box.

thank you.

[kgibm]

It would be great if mkdocs provides "copy to clipboard" for readthedocs theme, out of the box.

I accomplished this as follows:

1. Import ClipboardJS and Tippy (tippy-bundle.umd.js and popper.min.js) into a js subfolder.
2. Create css/extra.css which styles the copy-to-clipboard button:

   .clipboard {
       position: relative;
       display: block;
       float: right;
   }
   
   .btn-clipboard {
       position: relative;
       top: .5rem;
       right: .5rem;
       z-index: 10;
       display: block;
       padding: .25rem .5rem;
       cursor: pointer;
   }

3. Create js/extra.js which uses jQuery (built into the theme) to wait for the page to load and then find all code blocks, insert a Copy button, and add handlers:

   $(document).ready(function() {
     // https://clipboardjs.com/
     var selectors = document.querySelectorAll('pre code');
     var copyButton = '<div class="clipboard"><span class="btn btn-neutral btn-clipboard" title="Copy to clipboard">Copy</span></div>';
     Array.prototype.forEach.call(selectors, function(selector){
       selector.insertAdjacentHTML('beforebegin', copyButton);
     });
     var clipboard = new ClipboardJS('.btn-clipboard', {
       target: function (trigger) {
         return trigger.parentNode.nextElementSibling;
       }
     });
   
     clipboard.on('success', function (e) {
       e.clearSelection();
   
       // https://atomiks.github.io/tippyjs/v6/all-props/
       var tippyInstance = tippy(
         e.trigger,
         {
           content: 'Copied',
           showOnCreate: true,
           trigger: 'manual',
         },
       );
       setTimeout(function() { tippyInstance.hide(); }, 1000);
     });
   });

4. Update mkdocs.yaml:

   extra_css:
     - css/extra.css
   extra_javascript:
     - js/popper.min.js
     - js/tippy-bundle.umd.js
     - js/clipboard.js
     - js/extra.js
   

[niccokunzmann]

Thank you! I modified the CSS so the copy button inside:

.clipboard {
    position: relative;
    display: block;
    float: right;
    right: 18px;
    line-height: 0px;
    width: 0px;
}

.clipboard:hover {
  color: var(--md-accent-fg-color);
  transition: color 125ms;
}

And, I use this instead of "Copy" ⧉ .