- Custom Plugin
- |
- PHP
- |
- WordPress
- |
- WPCodebox
How to Add Source Code Highlights and a Copy Button in WordPress
Enhancing the readability and functionality of your source code snippets can be a game-changer for your WordPress site. Today, let’s talk about how to add source code highlights and a handy “Copy Code” button to your site—without using any plugins!
Highlight.js Initialization
First, we’ll use Highlight.js to make your code snippets look great. Highlight.js is a fantastic library that automatically styles your code snippets, making them more readable and aesthetically pleasing.
Step 1: Enqueue Highlight.js Scripts and Styles
To start, we’ll need to load the Highlight.js library and its CSS styles from a CDN. This ensures that your code snippets are styled correctly.
Step 2: Adding Copy Code Button
Next, we enhance the Highlight.js functionality by adding a “Copy Code” button to each code block. This button lets users easily copy code snippets to their clipboard with just one click!
Making it Work
Using a bit of PHP, we can enqueue the necessary scripts and styles, then add a JavaScript snippet that initializes Highlight.js and appends the “Copy Code” button to each code block.
Step 3: Wrap Standalone Code Tags
To ensure all your standalone <code> tags within <p> tags are correctly highlighted, a PHP filter will wrap these within <pre> tags. This is a crucial step for consistent styling.
Step 4: Custom Styles
Finally, we add custom CSS styles. This will style the pre and code elements and the “Copy Code” button, ensuring everything looks clean and professional.
And that’s it! You’ve now enhanced your WordPress site with beautifully highlighted code that’s easy to copy. This improves the aesthetic and enhances user experience by making code snippets more functional and user-friendly.
Instructions for WPCodeBox:
- Add a new snippet in WPCodeBox.
- Paste the script
- Save it once, then Enable it, and Save it again
- Clear your cache
- Check your existing PRE or CODE tags
You can also apply this using a functions.php file or a custom plugin.
Type: PHP
<?php
// MOST OF THE TIME YOU WILL NOT NEED THE OPENING <?PHP TAG
//
// Enqueue Highlight.js scripts and styles
// v2.5
// Date: Sunday, June 02, 2024
// Author: Ruhani Rabin
//
//
function enqueue_highlight_js() {
wp_enqueue_script('highlight-js', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js', array(), null, true);
wp_enqueue_style('highlight-js-style', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github-dark.min.css');
// Add a script to initialize Highlight.js and the copy code functionality
wp_add_inline_script('highlight-js', 'document.addEventListener("DOMContentLoaded", function() {
hljs.highlightAll();
// Copy code functionality
document.querySelectorAll("pre code").forEach(function(codeBlock, index) {
let pre = codeBlock.parentElement;
let button = document.createElement("a");
button.href = "javascript:void(0);";
button.innerText = "Copy Code";
button.style.position = "absolute";
button.style.top = "10px";
button.style.right = "10px";
button.style.textDecoration = "none";
button.classList.add("copy-code-btn");
button.dataset.index = index;
pre.style.position = "relative";
pre.style.paddingTop = "40px";
pre.appendChild(button);
button.addEventListener("click", function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
alert("Code copied to clipboard!");
}).catch(function(error) {
alert("Failed to copy code: " + error);
});
});
});
});');
}
add_action('wp_enqueue_scripts', 'enqueue_highlight_js');
// Filter standalone <code> tags within <p> and wrap them with <pre>
function filter_code_tags($content) {
$pattern = '/<p>\s*<code>(.*?)<\/code>\s*<\/p>/i';
$replacement = '<div class="code-container"><pre><code>$1</code></pre></div>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'filter_code_tags');
// Custom styles for <code> elements
function add_custom_code_style() {
echo '<style>
pre, code {
font-family: consolas, monospace;
font-size: 16px;
border-radius: 5px;
overflow-x: auto;
}
pre {
position: relative;
padding: 20px;
padding-top: 40px;
}
.copy-code-btn {
text-decoration: none;
position: absolute;
top: 10px;
right: 10px;
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
}
/* Media query for devices with a maximum width of 600px */
@media (max-width: 600px) {
pre, code {
font-size: 12px;
border-radius: 0px;
overflow-x: auto;
position: relative;
padding: 3px;
padding-top: 10px;
/* Smaller font size for mobile devices */
}
}
</style>';
}
add_action('wp_head', 'add_custom_code_style');
?>