☰

GitHub Copy Code Snippet

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

目前为 2024-02-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Copy Code Snippet
  3. // @version     0.3.10
  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. // @match       https://gist.github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=1108163
  12. // @icon        https://github.githubassets.com/pinned-octocat.svg
  13. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  14. // ==/UserScript==
  15.  
  16. (() => {
  17. 	"use strict";
  18.  
  19. 	let copyId = 0;
  20. 	const markdownSelector = ".markdown-body, .markdown-format",
  21. 		codeSelector = "pre:not(.gh-csc-pre)",
  22.  
  23. 		copyButton = document.createElement("clipboard-copy");
  24. 	copyButton.className = "btn btn-sm tooltipped tooltipped-w gh-csc-button";
  25. 	copyButton.setAttribute("aria-label", "Copy to clipboard");
  26. 	// This hint isn't working yet (GitHub needs to fix it)
  27. 	copyButton.setAttribute("data-copied-hint", "Copied!");
  28. 	copyButton.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. 	GM_addStyle(`
  34. 		.gh-csc-wrap {
  35. 			position: relative;
  36. 		}
  37. 		.gh-csc-wrap:hover .gh-csc-button {
  38. 			display: block;
  39. 		}
  40. 		.gh-csc-button {
  41. 			display: none;
  42. 			padding: 3px 6px;
  43. 			position: absolute;
  44. 			top: 3px;
  45. 			right: 3px;
  46. 			z-index: 20;
  47. 		}
  48. 		.gh-csc-wrap.ghd-code-wrapper .gh-csc-button {
  49. 			right: 31px;
  50. 		}
  51. 		.gh-csc-button svg {
  52. 			vertical-align: text-bottom;
  53. 		}
  54. 	`);
  55.  
  56. 	function addButton(wrap, code) {
  57. 		if (!wrap.classList.contains("gh-csc-wrap")) {
  58. 			copyId++;
  59. 			// See comments from sindresorhus/refined-github/issues/1278
  60. 			code.id = `gh-csc-${copyId}`;
  61. 			copyButton.setAttribute("for", `gh-csc-${copyId}`);
  62. 			wrap.classList.add("gh-csc-wrap");
  63. 			wrap.insertBefore(copyButton.cloneNode(true), wrap.childNodes[0]);
  64. 		}
  65. 	}
  66.  
  67. 	function init() {
  68. 		const markdown = document.querySelector(markdownSelector);
  69. 		if (markdown) {
  70. 			[...document.querySelectorAll(markdownSelector)].forEach(md => {
  71. 				[...md.querySelectorAll(codeSelector)].forEach(pre => {
  72. 					let code = pre.querySelector("code");
  73. 					let wrap = pre.parentNode;
  74. 					if (code) {
  75. 						// pre > code
  76. 						addButton(pre, code);
  77. 					} else if (wrap.classList.contains("highlight")) {
  78. 						// div.highlight > pre
  79. 						addButton(wrap, pre);
  80. 					}
  81. 				});
  82. 			});
  83. 		}
  84. 	}
  85.  
  86. 	document.addEventListener("ghmo:container", init);
  87. 	document.addEventListener("ghmo:comments", init);
  88. 	init();
  89. })();