Code block

An example of using the default code block.

add_action('wp_enqueue_scripts', function () {
/* CSS: Line numbers, copy button, alignment fix */
$css = <<<CSS
/* Wrapper around each code block */
.code-copy-wrapper { 
position: relative; 
margin-bottom: 1em; 
}
/* Alignwide setting */
.code-copy-wrapper.alignwide { 
max-width: var(--wp--style--global--content-size); 
margin-left: auto; 
margin-right: auto; 
}
/* Alignfull setting */
.code-copy-wrapper.alignfull { 
max-width: none; 
width: 100%; 
margin-left: 0; 
margin-right: 0; 
}
/* Main code block styling */
.code-copy-wrapper pre.wp-block-code {
position: relative;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
padding: 1em 3.5em 1em 1em; /* right space for button, left for numbers */
white-space: pre-wrap;
word-wrap: break-word;
font-family: monospace;
counter-reset: linenumber;
margin: 0;
box-sizing: border-box;
}
/* Code inside block */
.code-copy-wrapper pre.wp-block-code code {
display: block;
white-space: pre-wrap;
word-wrap: break-word;
user-select: text;
}
/* Each line inside code */
.code-copy-wrapper pre.wp-block-code code > span {
display: block;
counter-increment: linenumber;
padding-left: 3.5em; /* space before code text */
position: relative;
}
/* Line number style */
.code-copy-wrapper pre.wp-block-code code > span::before {
content: counter(linenumber);
position: absolute;
left: 0;
width: 2.2em;
text-align: right;
padding-right: 0.5em;
color: #999;
user-select: none;
}
/* Copy button styling */
.code-copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: none;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease;
z-index: 10;
padding: 0;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
gap: 0.25em;
}
.code-copy-btn:hover,
.code-copy-btn:focus { opacity: 1; outline: none; }
CSS;
wp_register_script('code-enhancer', '', [], null, true);
wp_enqueue_script('code-enhancer');
wp_add_inline_style('wp-block-library', $css);
/* JS: Add copy button + wrap lines */
$js = <<<JS
document.addEventListener('DOMContentLoaded', function () {
const clipboardSVG = '<svg aria-hidden="true" focusable="false" width="20" height="20" 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"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
const checkmarkSVG = '<svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
document.querySelectorAll('pre.wp-block-code').forEach(pre => {
if (pre.querySelector('.code-copy-btn')) return;
// Wrap with alignment support
if (!pre.parentNode.classList.contains('code-copy-wrapper')) {
const wrapper = document.createElement('div');
wrapper.className = 'code-copy-wrapper';
if (pre.classList.contains('alignwide')) wrapper.classList.add('alignwide');
if (pre.classList.contains('alignfull')) wrapper.classList.add('alignfull');
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
}
// Add copy button
const button = document.createElement('button');
button.className = 'code-copy-btn';
button.type = 'button';
button.setAttribute('aria-label', 'Copy code to clipboard');
button.innerHTML = clipboardSVG + ' Copy';
pre.appendChild(button);
// Wrap each line in a span for numbering
const code = pre.querySelector('code');
if (code && !code.dataset.linesWrapped) {
const lines = code.innerText.split('\\n');
const escapeHtml = text => text.replace(/[&<>"']/g, m => ({
'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
}[m] || m));
code.innerHTML = lines.map(line =>
'<span>' + (line === '' ? '&#8203;' : escapeHtml(line)) + '</span>'
).join('');
code.dataset.linesWrapped = 'true';
}
// Copy to clipboard
button.addEventListener('click', () => {
if (!code) return;
navigator.clipboard.writeText(code.innerText).then(() => {
button.innerHTML = checkmarkSVG + ' Copied';
setTimeout(() => button.innerHTML = clipboardSVG + ' Copy', 2000);
});
});
});
});
JS;
wp_add_inline_script('code-enhancer', $js);
});