How to Create a Code-Sharing Box with Syntax Highlighting and Language Labels

Here's how to create a code-sharing box with syntax highlighting, language labels, and copy buttons for your PHP blog posts:

1. Add Required CSS (Add to your stylesheet)

/* Code Container Styles */
.code-container {
    position: relative;
    margin: 20px 0;
    background: #1e1e1e;
    border-radius: 6px;
    font-family: 'Fira Code', monospace;
}

/* Language Label */
.code-language {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #999;
    font-size: 0.9em;
    z-index: 2;
}

/* Copy Button */
.copy-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.copy-button:hover {
    background: #0056b3;
}

/* Syntax Highlighting (Prism.js Theme) */
pre code {
    display: block;
    padding: 2em 1.5em 1.5em;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.5;
}

2. Add JavaScript (For Copy Functionality)

document.querySelectorAll('.copy-button').forEach(button => {
    button.addEventListener('click', () => {
        const code = button.parentNode.querySelector('code').innerText;
        navigator.clipboard.writeText(code).then(() => {
            button.textContent = 'Copied!';
            setTimeout(() => {
                button.textContent = 'Copy';
            }, 2000);
        });
    });
});

3. PHP Function for Code Blocks (Add to functions.php)

function code_snippet($atts, $content = null) {
    $atts = shortcode_atts(array(
        'language' => 'php'
    ), $atts);

    $content = htmlspecialchars(trim($content));
    
    return '
    <div class="code-container">
        <span class="code-language">' . esc_html($atts['language']) . '</span>
        <pre><code class="language-' . esc_attr($atts['language']) . '">' . $content . '</code></pre>
        <button class="copy-button">Copy</button>
    </div>';
}
add_shortcode('code', 'code_snippet');

4. Required Libraries (Add to Header)

<!-- Prism.js Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-php.min.js"></script>

<!-- Optional: Add more languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>

5. Usage in Blog Posts

[code language="php"]
<?php
function hello_world() {
    echo "Hello World!";
}
[/code]

Key Features:

• Automatic syntax highlighting via Prism.js
• Language label in top-right corner
• One-click copy button
• Dark theme styling
• Support for 100+ programming languages
• Responsive design
•  

• How It Works:

• The [code] shortcode wraps your code snippets
• Prism.js handles syntax highlighting
• CSS positions the language label and copy button
• JavaScript handles clipboard functionality
• htmlspecialchars() ensures code safety