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

Question

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?

Answer 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.
Once copied, you can paste it in a markdown document using Fenced code blocks, to create your code block of your own.
```
function test() {
console.log("notice the blank line before this function?");
}
```

Answer 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])
})
})