Cải thiện khung chèn code mặc định của WordPress

// CẢI THIỆN KHUNG CHÈN CODE MẶC ĐỊNH - HOCBAN.VN
add_filter('the_content', 'add_hocban_code_display_frame', 20);
function add_hocban_code_display_frame($content) {
if (is_singular() && in_the_loop() && is_main_query()) {
$i = 0;
return preg_replace_callback('/<pre\b[^>]*>(.*?)<\/pre>/is', function ($matches) use (&$i) {
$unique_id = 'hb_code_' . ++$i;
$code = esc_html(wp_strip_all_tags($matches[1]));
return "<div class='hocban-code-box'><p id='{$unique_id}_status' style='display:none;color:#22c55e;margin:0 0 10px;font:600 14px sans-serif;text-align:right'>Đã copy xong!</p><div style='position:relative'><pre id='{$unique_id}_content' class='hocban-pre-scroll'>{$code}</pre><button type='button' class='hocban-copy-btn' onclick='copyHocbanCode(\"{$unique_id}\")'>Copy</button></div></div>";
}, $content);
}
return $content;
}

add_action('wp_footer', 'hocban_code_assets');
function hocban_code_assets() {
if (is_singular()) { ?>
<style>
.hocban-code-box{margin:35px 0;clear:both}
.hocban-pre-scroll{margin:0;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:22px 25px;font:500 17px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#1e293b;white-space:pre-wrap;word-wrap:break-word;max-height:350px;overflow-y:auto}
.hocban-pre-scroll::-webkit-scrollbar{width:6px}
.hocban-pre-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
.hocban-copy-btn{position:absolute;top:12px;right:12px;padding:8px 16px;background:#043349;color:#fff;border:none;border-radius:8px;cursor:pointer;font:600 15px sans-serif;z-index:10}
@media(max-width:768px){.hocban-pre-scroll{padding:18px;font-size:17px}.hocban-copy-btn{padding:7px 14px;font-size:14px}}
</style>
<script>
function copyHocbanCode(id){
navigator.clipboard.writeText(document.getElementById(id+"_content").innerText).then(()=>{
document.getElementById(id+"_status").style.display="block";
setTimeout(()=>{document.getElementById(id+"_status").style.display="none"},2000);
});
}
</script>
<?php }
}
// HẾT CODE - CẢI THIỆN KHUNG CHÈN CODE MẶC ĐỊNH - HOCBAN.VN

// CẢI THIỆN KHUNG CHÈN CODE MẶC ĐỊNH - HOCBAN.VN
add_filter('the_content', 'add_hocban_code_display_frame', 20);
function add_hocban_code_display_frame($content) {
if (is_singular() && in_the_loop() && is_main_query()) {
return preg_replace_callback('/<pre\b[^>]*>(.*?)<\/pre>/is', function ($matches) {
$code = $matches[1];
return "<div class='hb-code-container'><button type='button' class='hb-copy-btn' onclick='copyHbCode(this)'><svg class='hb-copy-icon' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg><span class='hb-btn-text'>Copy</span></button><pre><code>{$code}</code></pre></div>";
}, $content);
}
return $content;
}

add_action('wp_footer', 'hocban_code_assets');
function hocban_code_assets() {
if (is_singular()) { ?>
<style>
.hb-code-container { position: relative; background-color: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; margin: 35px 0; overflow: hidden; }
.hb-code-container pre { margin: 0; padding: 22px 25px; overflow-y: auto; display: block; background: transparent !important; border: none !important; max-height: 350px; white-space: pre-wrap; word-break: break-word; scrollbar-width: none; -ms-overflow-style: none; }
.hb-code-container pre::-webkit-scrollbar { display: none; }
.hb-code-container code { font: 500 17px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; color: #1e293b; background: none !important; padding: 0 !important; border: none !important; }
.hb-copy-btn { position: absolute; top: 12px; right: 12px; background: #ffffff; color: #5f6368; border: 1px solid #dadce0; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; z-index: 10; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.hb-copy-btn:hover { background-color: #f8f9fa; color: #1a73e8; border-color: #1a73e8; }
.hb-copy-icon { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 768px) { .hb-code-container code { font-size: 16px !important; } .hb-copy-btn { padding: 5px 10px; } }
</style>
<script>
function copyHbCode(button) {
const codeArea = button.parentElement.querySelector('code');
const textToCopy = codeArea.innerText;
const btnText = button.querySelector('.hb-btn-text');
navigator.clipboard.writeText(textToCopy).then(() => {
btnText.innerText = "Copied!";
button.style.borderColor = "#188038";
button.style.color = "#188038";
setTimeout(() => {
btnText.innerText = "Copy";
button.style.borderColor = "#dadce0";
button.style.color = "#5f6368";
}, 2000);
});
}
</script>
<?php }
}
// HẾT CODE - CẢI THIỆN KHUNG CHÈN CODE MẶC ĐỊNH - HOCBAN.VN