Skip to content

Instantly share code, notes, and snippets.

@kpym
Last active March 31, 2023 11:27
Show Gist options
  • Save kpym/30d90be41ab5c248cdf7 to your computer and use it in GitHub Desktop.
Save kpym/30d90be41ab5c248cdf7 to your computer and use it in GitHub Desktop.
Greasemonkey : Add copy code button in stackexchange.com (SX).
// ==UserScript==
// @name Copy code from SX
// @namespace https://gist.github.com/kpym/30d90be41ab5c248cdf7
// @version 0.3
// @description This script use clipboard.js to add copy button for code sections on SX. When you hover a code the button "</>" appear on the top right corner. Click it and the code is copied.
// @author kpym
// @match *://*.stackexchange.com/*
// @match *://*.stackoverflow.com/*
// @match *://*.superuser.com/*
// @match *://*.serverfault.com/*
// @match *://*.askubuntu.com/*
// @match *://*.stackapps.com/*
// @match *://*.mathoverflow.net/*
// @grant GM_addStyle
// @require https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.5/dist/clipboard.min.js
// ==/UserScript==
/* jshint -W097 */
'use strict';
// ------------------------------------------
// CSS part injected in the page
GM_addStyle(" \
.precontainer { \
position: relative; \
} \
pre > code { \
white-space: pre; \
} \
pre > .copy-btn { \
background: #DDD; \
font-family: monospace; \
font-weight: bolder; \
margin: 0; \
opacity: 0; \
padding: 4px; \
position: absolute; \
right: 21px; \
top: 0px; \
cursor: pointer; \
-webkit-transition: opacity 0.3s ease-in-out; \
-o-transition: opacity 0.3s ease-in-out; \
transition: opacity 0.3s ease-in-out; \
} \
pre:hover >.copy-btn { \
opacity: 1; \
} \
");
// ------------------------------------------
// Code part injected in the page
// add the button to any code portion
$('pre > code').before($('<span class="copy-btn">\\copy{code}</span>')).parent().wrap('<div class="precontainer"></div>');
// do the magic with clipboard.js
new Clipboard('.copy-btn', {
text: function(trigger) {
return $(trigger.nextElementSibling).text();
}
})
.on('success',function (e) {$(e.trigger).html("\\done@copy")})
.on('error',function (e) {$(e.trigger).html("\\error{@*!?}")});
// ==UserScript==
// @name Copy code from SX
// @namespace https://gist.github.com/kpym/30d90be41ab5c248cdf7
// @version 0.1
// @description This script use clipboard.js to add copy button for code sections on SX. When you hover a code the button "</>" appear on the top right corner. Click it and the code is copied.
// @author kpym
// @match http*://*.stackexchange.com/*
// @grant GM_addStyle
// @require https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.5/dist/clipboard.min.js
// ==/UserScript==
/* jshint -W097 */
'use strict';
// ------------------------------------------
// CSS part injected in the page
GM_addStyle(" \
pre { \
position: relative; \
} \
pre > code { \
white-space: pre; \
} \
pre > .copy-btn { \
background: #DDD; \
font-family: monospace; \
font-weight: bolder; \
margin: 0; \
opacity: 0; \
padding: 4px; \
position: absolute; \
right: 0px; \
top: 0px; \
cursor: pointer; \
-webkit-transition: opacity 0.3s ease-in-out; \
-o-transition: opacity 0.3s ease-in-out; \
transition: opacity 0.3s ease-in-out; \
} \
pre:hover >.copy-btn { \
opacity: 1; \
} \
");
// ------------------------------------------
// Code part injected in the page
// add the button to any code portion
$('pre > code').before($('<span class="copy-btn">&lt;/&gt;</span>'));
// do the magic with clipboard.js
new Clipboard('.copy-btn', {
text: function(trigger) {
return $(trigger.nextElementSibling).text();
}
})
.on('success',function (e) {$(e.trigger).html(":-)").css({"color":"green"})})
.on('error',function (e) {$(e.trigger).html(":-(").css({"color":"red"})});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment