☰

Copy Button for Code Blocks on Azure DevOps

Add a copy button for every code highlighting block in Markdown on Azure DevOps

// ==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();
})();