MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
/* Add copy ICON to syntaxhighlight blocks */
mw.hook('wikipage.content').add(function($content) {
    // Standard "Clipboard" SVG icon
    var copyIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
    var checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#28a745" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';

    $content.find('.mw-highlight').each(function() {
        var $block = $(this);
        if ($block.find('.copy-button').length > 0) return;

        var $button = $('<button>')
            .addClass('copy-button')
            .html(copyIcon) // Inject the SVG here
            .attr('title', 'Copy to clipboard')
            .on('click', function() {
                var code = $block.find('pre').text();
                navigator.clipboard.writeText(code).then(function() {
                    $button.html(checkIcon); // Switch to checkmark on success
                    setTimeout(function() { $button.html(copyIcon); }, 2000);
                });
            });

        $block.css('position', 'relative').prepend($button);
    });
});