Copy Button for Code Blocks on Azure DevOps

Add a copy button for every code highlighting block in Markdown on Azure DevOps
Verze ze dne 23. 11. 2023. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name         Copy Button for Code Blocks on Azure DevOps
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Add a copy button for every code highlighting block in Markdown on Azure DevOps
// @author       You
// @match        https://dev.azure.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    function addCopyButtonToCodeBlock(codeBlock) {
        const copyButton = document.createElement('button');
        copyButton.className = 'copy-btn';

        // Use the Fluent "Copy" icon
        copyButton.innerHTML = '<span aria-hidden="true" class="type-icon fontSizeML flex-noshrink fabric-icon ms-Icon--Copy"></span> <span style="vertical-align: middle;">Copy</span>';

        copyButton.onclick = function () {
            copyToClipboard(codeBlock.innerText);
        };

        // Modern styling
        copyButton.style.backgroundColor = '#007acc'; // Azure DevOps color
        copyButton.style.border = 'none';
        copyButton.style.color = '#fff';
        copyButton.style.padding = '8px';
        copyButton.style.borderRadius = '4px';
        copyButton.style.cursor = 'pointer';
        copyButton.style.display = 'flex'; // Use flexbox for centering

        // Align items vertically in the center
        copyButton.style.alignItems = 'center';

        // Position the button at the top right of the code block
        copyButton.style.position = 'absolute';
        copyButton.style.top = '8px';
        copyButton.style.right = '8px';

        codeBlock.parentNode.style.position = 'relative'; // Ensure the parent has a relative position

        codeBlock.parentNode.insertBefore(copyButton, codeBlock);

        // Add some padding to the code block to prevent overlap with the button
        codeBlock.style.paddingTop = '30px';
    }

    // Function to copy text to clipboard
    function copyToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('Code copied to clipboard!');
    }

    function processCodeBlocks() {
        const codeBlocks = document.querySelectorAll('pre code:not(.copy-processed)');
        codeBlocks.forEach((codeBlock) => {
            addCopyButtonToCodeBlock(codeBlock);
            codeBlock.classList.add('copy-processed');
        });
    }

    // Observe changes to the DOM and add copy buttons when code blocks are added
    const observer = new MutationObserver(processCodeBlocks);
    const config = { childList: true, subtree: true };
    observer.observe(document.body, config);

    // Add copy buttons for code blocks on initial script execution
    processCodeBlocks();
})();