不用插件为WordPress实现代码美化显示并加上复制按钮

代码美化本身用插件就能达成，但作为玩AI的一部分，今天就用代码来解决。

代码写在哪里？

写在主题的function.php，最下方即可。

在既定位置插入代码

这个代码可以直接复制粘贴使用，大家看到的效果就是最终会实现的效果。

/**
 * 高性能、零排版错误、现代海军蓝配色
 */

// 1. 引入 Prism 核心及自动加载
add_action('wp_enqueue_scripts', 'gemini_navy_minimal_assets');
function gemini_navy_minimal_assets() {
    wp_enqueue_style('prism-okaidia', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css');
    wp_enqueue_script('prism-core', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js', array(), null, true);
    wp_enqueue_script('prism-autoloader', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js', array('prism-core'), null, true);
}

// 2. 注入 Navy 样式与复制脚本
add_action('wp_footer', 'gemini_navy_minimal_footer');
function gemini_navy_minimal_footer() {
?>
<style>
    /* --- 1. 现代化 Navy 容器 --- */
    pre[class*="language-"] {
        background: #1a2332 !important; /* 海军蓝 */
        margin: 2em 0 !important;
        border-radius: 10px !important;
        position: relative !important;
        padding: 1.5em !important; /* 均匀内边距 */
        overflow: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }

    /* --- 2. 代码正文 --- */
    pre[class*="language-"] code {
        display: block !important;
        font-family: 'JetBrains Mono', Consolas, Monaco, monospace !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        white-space: pre !important;
        color: #e0e6ed !important;
        text-shadow: none !important;
    }

    /* --- 3. 语法高亮色值 (现代配色) --- */
    .token.keyword { color: #7ad7ff !important; }   /* 关键字 */
    .token.string { color: #addb67 !important; }    /* 字符串 */
    .token.function { color: #ffcb8b !important; }  /* 函数 */
    .token.comment { color: #637777 !important; font-style: italic !important; }
    .token.operator { color: #c792ea !important; }  /* 运算符 */
    .token.number { color: #f78c6c !important; }    /* 数字 */

    /* --- 4. 复制按钮 (悬浮微调) --- */
    .copy-btn {
        position: absolute; top: 12px; right: 12px;
        padding: 4px 10px; font-size: 11px; font-weight: 600;
        color: rgba(255, 255, 255, 0.5); 
        background: rgba(255, 255, 255, 0.1); 
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px; 
        cursor: pointer; opacity: 0; transition: all 0.2s;
        text-transform: uppercase;
        z-index: 10;
    }
    pre:hover .copy-btn { opacity: 1; }
    .copy-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
    .copy-btn.success { background: #4ec9b0 !important; color: #1a2332 !important; }

    /* 针对手机端适配 */
    @media (max-width: 768px) {
        .copy-btn { opacity: 0.8; font-size: 9px; }
    }
</style>

<script>
(function() {
    function initMinimalPrism() {
        document.querySelectorAll('pre').forEach(function(pre) {
            let code = pre.querySelector('code');
            if (!code || pre.dataset.prismProcessed) return;

            // 自动补全语言类名
            if (!code.className.includes('language-')) {
                code.classList.add('language-javascript');
            }

            // 注入复制按钮
            const btn = document.createElement('button');
            btn.className = 'copy-btn';
            btn.innerText = 'Copy';
            btn.onclick = function() {
                navigator.clipboard.writeText(code.innerText).then(() => {
                    btn.innerText = 'Copied'; btn.classList.add('success');
                    setTimeout(() => { btn.innerText = 'Copy'; btn.classList.remove('success'); }, 2000);
                });
            };
            pre.appendChild(btn);
            pre.dataset.prismProcessed = "true";
        });

        if (window.Prism) { Prism.highlightAll(); }
    }

    window.addEventListener('load', initMinimalPrism);
    // 针对某些主题的异步加载
    setTimeout(initMinimalPrism, 500);
})();
</script>
<?php
}

实现的效果

Before

编辑器里所见即所得的效果，也是原先的效果

After

还是那句话：换主题的话一定记得把代码带过去。