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

add_action('wp_footer', function () {
    if (!is_singular()) return;
    ?>
    <script>
    (() => {
        const init = () => {
            if (window.wazaCodocHcbReady) return;
            window.wazaCodocHcbReady = true;
            const highlighted = new WeakMap();
            const controls = new WeakMap();
            let pending = false;
            const scan = () => {
                pending = false;
                document.querySelectorAll('.codoc-entries .hcb_wrap').forEach(wrap => {
                    const code = wrap.querySelector('pre code');
                    if (!code) return;
                    const text = code.textContent;
                    if (window.Prism && typeof window.Prism.highlightElement === 'function'
                        && highlighted.get(code) !== text) {
                        try {
                            window.Prism.highlightElement(code);
                            highlighted.set(code, code.textContent);
                        } catch (e) { /* 元のコード表示を残す。次の再検査で再試行する。 */ }
                    }
                    let state = controls.get(wrap);
                    // HCB側に既存のコピー操作があれば追加しない。
                    if (wrap.querySelector('.hcb-clipboard')) {
                        if (state) { state.button.remove(); state.status.remove(); controls.delete(wrap); }
                        return;
                    }
                    if (state) {
                        state.code = code;
                        if (!state.button.isConnected) wrap.appendChild(state.button);
                        if (!state.status.isConnected) wrap.appendChild(state.status);
                        return;
                    }
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'waza-codoc-copy';
                    button.textContent = 'コードをコピー';
                    const status = document.createElement('span');
                    status.setAttribute('role', 'status');
                    state = { code, button, status };
                    controls.set(wrap, state);
                    button.addEventListener('click', async () => {
                        status.textContent = '';
                        try {
                            if (!state.code.isConnected || !navigator.clipboard || !navigator.clipboard.writeText) throw new Error('unavailable');
                            await navigator.clipboard.writeText(state.code.textContent);
                            status.textContent = ' コピーしました。';
                        } catch (e) {
                            status.textContent = ' コピーできませんでした。コードを選択して手動でコピーしてください。';
                        }
                    });
                    wrap.append(button, status);
                });
            };
            const schedule = () => {
                if (pending) return;
                pending = true;
                requestAnimationFrame(scan);
            };
            if (typeof MutationObserver !== 'undefined') {
                new MutationObserver(records => {
                    if (records.some(r => (r.target.parentElement && r.target.parentElement.closest('.codoc-entries pre code'))
                        || Array.from(r.addedNodes).some(n =>
                        n.nodeType === 1 && (n.matches('.codoc-entries, .hcb_wrap, pre, code, .hcb-clipboard')
                        || n.querySelector('.codoc-entries, .hcb_wrap, pre, code'))))) schedule();
                }).observe(document.body, { childList: true, characterData: true, subtree: true });
            }
            // 外部スクリプトの遅延ロード後にも再検査。
            document.addEventListener('load', event => {
                if (event.target.tagName === 'SCRIPT') schedule();
            }, true);
            window.addEventListener('load', schedule, { once: true });
            document.addEventListener('waza-codoc-hcb-refresh', schedule);
            scan();
        };
        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
        else init();
    })();
    </script>
    <?php
}, 99);