☰

GitHub Copy Code Snippet

A userscript adds a copy to clipboard button on hover of markdown code snippets

当前为 2018-01-13 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Copy Code Snippet
  3. // @version     0.1.0
  4. // @description A userscript adds a copy to clipboard button on hover of markdown code snippets
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=234970
  12. // @icon        https://assets-cdn.github.com/pinned-octocat.svg
  13. // ==/UserScript==
  14. (() => {
  15. 	"use strict";
  16.  
  17. 	const markdown = ".markdown-body, .markdown-format",
  18. 		code = `:any(${markdown}) pre:not(.gh-csc-pre)`,
  19.  
  20. 		wrapper = document.createElement("div"),
  21. 		copyButton = document.createElement("button");
  22.  
  23. 	addAttr(copyButton, {
  24. 		"aria-label": "Copy to clipboard",
  25. 		className: "js-zeroclipboard btn btn-sm zeroclipboard-button tooltipped tooltipped-w gh-csc-button",
  26. 		"data-copied-hint": "Copied!",
  27. 		type: "button",
  28. 		innerHTML: `
  29. 			<svg aria-hidden="true" class="octicon octicon-clippy" height="16" viewBox="0 0 14 16" width="14">
  30. 				<path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path>
  31. 			</svg>`
  32. 	});
  33.  
  34. 	GM_addStyle(`
  35. 		.gh-csc-div {
  36. 			position: relative;
  37. 		}
  38. 		.gh-csc-div:hover .gh-csc-button {
  39. 			display: block;
  40. 		}
  41. 		.gh-csc-button {
  42. 			display: none;
  43. 			position: absolute;
  44. 			top: 3px;
  45. 			right: 3px;
  46. 		}
  47. 	`);
  48.  
  49. 	// https://caniuse.com/#search=%3Aany
  50. 	function fixAnySelector(sel) {
  51. 		const prefix = document.head.style.MozOrient === "" ? "-moz-" : "-webkit-";
  52. 		return sel.replace(/:any\(/g, `:${prefix}any(`);
  53. 	}
  54.  
  55. 	function addAttr(el, attrs) {
  56. 		Object.keys(attrs).forEach(attr => {
  57. 			const value = attrs[attr];
  58. 			switch(attr) {
  59. 			case "className":
  60. 				el.className = value;
  61. 				break;
  62. 			case "innerHTML":
  63. 				el.innerHTML = value;
  64. 				break;
  65. 			default:
  66. 				el.setAttribute(attr, value);
  67. 			}
  68. 		});
  69. 	}
  70.  
  71. 	function init() {
  72. 		if (document.querySelector(markdown)) {
  73. 			[...document.querySelectorAll(fixAnySelector(code))].forEach(pre => {
  74. 				let div = pre.parentNode;
  75. 				if (!div.classList.contains("highlight")) {
  76. 					div = wrapper.cloneNode();
  77. 					pre.parentNode.insertBefore(div, pre);
  78. 					div.appendChild(pre);
  79. 				}
  80. 				div.classList.add("gh-csc-div", "js-zeroclipboard-container");
  81. 				pre.classList.add("gh-csc-pre", "js-zeroclipboard-target");
  82. 				div.insertBefore(copyButton.cloneNode(true), div.childNodes[0]);
  83. 			});
  84. 		}
  85. 	}
  86.  
  87. 	document.addEventListener("ghmo:container", init);
  88. 	document.addEventListener("ghmo:comments", init);
  89. 	init();
  90. })();