Easy way to add 'copy to clipboard' to GitHub markdown?

21,159

Solution 1

The copy button is now a reality (May 2021), as tweeted by Nat Friedman

We just added a "Copy" button to all code blocks on GitHub.

Copy

Solution 2

I think that it is not what you want, but if you want to copy, you can do it by running the bookmarklet and adding a copy button.

var copy = function(target) {
    var textArea = document.createElement('textarea')
    textArea.setAttribute('style','width:1px;border:0;opacity:0;')
    document.body.appendChild(textArea)
    textArea.value = target.innerHTML
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
}

var pres = document.querySelectorAll(".comment-body > pre")
pres.forEach(function(pre){
  var button = document.createElement("button")
  button.className = "btn btn-sm"
  button.innerHTML = "copy"
  pre.parentNode.insertBefore(button, pre)
  button.addEventListener('click', function(e){
    e.preventDefault()
    copy(pre.childNodes[0])
  })
})
Share:
21,159
zanerock
Author by

zanerock

Long time software developer and project manager. Freelance last 10+ years.

Updated on May 11, 2021

Comments

  • zanerock
    zanerock about 3 years

    Specifically, I have blocks of code for install that I want the user to be able to quickly copy and paste into a terminal. I'd like a button to 'copy to clipboard' for the code block. Since there's a 'copy to clipboard' button for the git clone URLs, I was wondering if I could piggy back off that or if not whether there was some relatively simple I could add to the MD to make this happen. Or is this simply not possible with the processing and 'safication' the MD text goes through?