修复 infinite 前台无法代码高亮的问题

真是折腾起来就没完没了啊，解决完搜索问题时，在后台贴了两段代码，但是在前台访问的时候并没有高亮显示，于是乎就有了这篇文章。

解决方法：

登录后台，在系统设置中切换到 页脚自定义代码 滑块，输入以下的内容保存，刷新前台就可以高亮显示代码了 ，并且增加了行号显示和复制按钮

<!-- 1. 引入 Highlight.js 样式 (Atom One Dark 主题) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

<!-- 2. 引入 Highlight.js 核心、PHP 语言包 及 行号插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

<!-- 3. 行号自定义美化 & 去除斑马纹 & 复制按钮 CSS -->
<style>
    /* 强制 pre 容器支持相对定位 */
    .post-text pre, pre {
        position: relative !important;
        padding: 1rem !important;
        overflow-x: auto;
        border-radius: 6px;
    }

    /* 强制清除代码块内部表格背景 */
    pre code table,
    pre code table tr,
    pre code table td {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 行号分割样式 */
    .hljs-ln-td.hljs-ln-numbers {
        -webkit-user-select: none;
        user-select: none;
        text-align: right;
        color: #5c6370;
        border-right: 1px solid #3e4451 !important;
        padding-right: 12px !important;
        vertical-align: top;
    }

    .hljs-ln-td.hljs-ln-code {
        padding-left: 12px !important;
        vertical-align: top;
    }

    /* 复制按钮样式 */
    .copy-code-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 3px 8px;
        font-size: 12px;
        color: #abb2bf;
        background: rgba(40, 44, 52, 0.8);
        border: 1px solid #4b5263;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        outline: none;
    }

    .copy-code-btn:hover {
        background: #3e4451;
        color: #fff;
    }

    .copy-code-btn.copied {
        background: #98c379;
        color: #282c34;
        border-color: #98c379;
    }
</style>

<!-- 4. 初始化高亮、行号及一键复制功能 -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('pre code').forEach((el) => {
            let parentClass = el.parentElement.className;
            if (parentClass && !el.className) {
                el.className = parentClass;
            }

            // 1. 获取纯代码内容（在插入行号 DOM 前提取，防止把行号也复制进去）
            let rawCodeText = el.innerText;

            // 2. 执行语法高亮和生成行号
            hljs.highlightElement(el);
            hljs.lineNumbersBlock(el);

            // 3. 创建复制按钮
            let pre = el.parentElement;
            let btn = document.createElement('button');
            btn.className = 'copy-code-btn';
            btn.type = 'button';
            btn.innerText = '复制';

            // 点击复制逻辑
            btn.addEventListener('click', function() {
                navigator.clipboard.writeText(rawCodeText).then(() => {
                    btn.innerText = '已复制!';
                    btn.classList.add('copied');
                    setTimeout(() => {
                        btn.innerText = '复制';
                        btn.classList.remove('copied');
                    }, 2000);
                }).catch(err => {
                    console.error('复制失败:', err);
                });
            });

            pre.appendChild(btn);
        });
    });
</script>

玩得愉快！