As you will see, throughout this site, there are code snippets that have been nicely formatted and colour-coded with the ability to copy that code to the clipboard.
Initially, I used two plugins for this functionality. One was ‘Code Block’, and the other was ‘Copy Code to Clipboard’. The only problem was that ‘Code Block’ didn’t colour the code as it should. So I made a move.
The new plugin I moved to for code colouring and formatting is SyntaxHighter Evolved. One key missing feature for this is a ‘Copy’ button, which copies the code from the relevant HTML container. That’s an easy fix, I thought; I will just use the Copy Code to Clipboard plugin. However, it didn’t work. That plugin looks for <pre> tags and does its magic around those.
I tried to find an alternative version of the SyntaxHighlighter Evolved and Copy Code to Clipboard plugins. Still, I couldn’t find anything that worked together or formatted the code as I wanted. So, I decided to update the ‘Copy Code to Clipboard’ plugin to work with SyntaxHighligher Evolved. It turned out to be really easy once I worked out the classes and locations of the HTML elements.
The code below shows the changes I made to the ‘copy_code_script.js’ file: –
jQuery( document ).ready(function() {
var copy_text_label = copyScript.copy_text_label;
var copied_text_label = copyScript.copied_text_label;
var copy_text_label_safari = copyScript.copy_text_label_safari;
var copy_text_label_other_browser = copyScript.copy_text_label_other_browser;
var copy_button_background = copyScript.copy_button_background;
var copy_button_text_color = copyScript.copy_button_text_color;
if (copy_text_label == '') {
var copy_text_label = 'Copy';
}
if (copied_text_label == '') {
var copied_text_label = 'Copied';
}
if (copy_text_label_safari == '') {
var copy_text_label_safari = 'Press "⌘ + C" to copy';
}
if (copy_text_label_other_browser == '') {
var copy_text_label_other_browser = 'Press "Ctrl + C" to copy';
}
if (copy_button_background == '') {
var copy_button_background = '#000000';
}
if (copy_button_text_color == '') {
var copy_button_text_color = '#ffffff';
}
var copyButton = '<div class="btn-clipboard" style="color:'+copy_button_text_color+'; background-color:'+copy_button_background+';" title="" data-original-title="Copy to clipboard">'+copy_text_label+'</div>';
jQuery('div.wp-block-syntaxhighlighter-code').each(function(){
jQuery(this).wrap( '<div class="PreCodeWrapper"/>');
jQuery(this).css( 'padding', '1.0rem' );
/* jQuery(this).css( 'background-color', '#f6f6f6' ); */
});
jQuery('div.PreCodeWrapper').prepend(jQuery(copyButton)).children('.btn-clipboard').show();
// Run Clipboard
var copyCode = new ClipboardJS('.btn-clipboard', {
target: function(trigger) {
var a=trigger.nextElementSibling;
return a.querySelector('.code');
}
});
// On success:
// - Change the "Copy" text to "Copied".
// - Swap it to "Copy" in 2s.
// - Lead user to the "contenteditable" area with Velocity scroll.
copyCode.on('success', function(event) {
event.clearSelection();
event.trigger.textContent = copied_text_label;
window.setTimeout(function() {
event.trigger.textContent = copy_text_label;
}, 2000);
/* $.Velocity(pasteContent, 'scroll', {
duration: 1000
}); */
});
// On error (Safari):
// - Change the "Press Ctrl+C to copy"
// - Swap it to "Copy" in 2s.
copyCode.on('error', function(event) {
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (is_safari) {
event.trigger.textContent = copy_text_label_safari;
}
else if(navigator.userAgent.match(/ipad|ipod|iphone/i)){
event.trigger.textContent = copy_text_label_other_browser;
}
else{
event.trigger.textContent = copy_text_label_other_browser;
}
window.setTimeout(function() {
event.trigger.textContent = copy_text_label;
}, 5000);
});
});The first change finds the right DIV that contains the code block. SyntaxHighligher has code inside a DIV with a class called ‘wp-block-syntaxhighlighter-code’. I changed the padding slightly so the ‘Copy’ button was closer to the code block, as it was too high and didn’t look right.
The last change is to find a TD with a class called ‘code’ that follows/is a child of the code block DIV. This is where the actual code lives. Without this change, the entire code block, including the line numbers, was copied.
So, I now have nicely formatted and coloured code with a Copy button that works.
