codoc│有料記事コンテンツ内でHighlighting Code Blockを表示する方法

add_action('wp_footer', 'force_hcb_for_codoc_fallback');
function force_hcb_for_codoc_fallback() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        let hcb_processed = new WeakSet();

        const observer = new MutationObserver(() => {
            document.querySelectorAll('.hcb_wrap').forEach((wrap, index) => {
                if (hcb_processed.has(wrap)) return;
                hcb_processed.add(wrap);

                const code = wrap.querySelector('code');
                if (!code) return;

                // Prism.jsによるハイライトを強制適用
                if (typeof Prism !== 'undefined' && Prism.highlightElement) {
                    Prism.highlightElement(code);
                }

                // コピー用ボタンがなければ追加
                if (wrap.querySelector('.hcb-clipboard')) return;

                const btn = document.createElement('button');
                btn.className = 'hcb-clipboard';
                btn.setAttribute('data-clipboard-target', `[data-hcb-clip="${index + 1}"]`);
                btn.setAttribute('data-clipboard-action', 'copy');
                btn.setAttribute('aria-label', 'コピー');
                wrap.appendChild(btn);
                code.setAttribute('data-hcb-clip', index + 1);
            });

            // ClipboardJS初期化
            if (typeof ClipboardJS !== 'undefined') {
                new ClipboardJS('.hcb-clipboard').on('success', function (e) {
                    e.trigger.classList.add('-done');
                    setTimeout(() => {
                        e.trigger.classList.remove('-done');
                    }, 3000);
                });
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
    </script>
    <?php
}