• 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:

  1. Add a new snippet in WPCodeBox.
  2. Paste the script
  3. Save it once, then Enable it, and Save it again
  4. Clear your cache
  5. 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');
?>


More Codes

Quick Access Menu – Custom Dropdown for WP Admin Bar with Options Page

Improve functionality and aesthetics of your WordPress site with custom dropdowns, date replacement, and source code highlights. No plugins needed!

Enable Auto Update WordPress Plugins and Themes

Discover how to enable auto updates for WordPress plugins and themes with WPCodeBox. Add PHP snippets, save, and enjoy hassle-free updates!

Bash Script Expunge/Clear Logs and Journal Debian/Ubuntu Compatible using Cron

Efficiently manage log files on Ubuntu/Debian servers with a simple shell script. Reduce disk usage and keep your server running smoothly.