WordPress编辑器增加 markdown 代码块+复制按钮 功能（适用所有主题）

WordPress自带的代码按钮或者插件问题太多，今天发现支持markdown的系统代码块非常完善，如果能搬过来使用非常合适（如下图），WordPress编辑器增加 markdown 代码版功能（适用所有主题）方法都一样，无非编辑器不同，这里要注意如果插件里增加过代码插件需要停用会有冲突，（WP 通用，这种 <pre><code> 样式），同时加“右上角复制按钮”，同时实现按钮“绝对定位”，更稳的做法：外面包一层容器，把按钮定位到容器右上角，就不会掉到下面。方法如下：

这是参考markdown系统代码图，注意并不是支持markdown功能只参markdown编辑器里的代码功能

这是编辑器加上后效果如下，编辑器也可以修改为图标或者像现在文字

前端文章最终显示效果如下面的代码框

把这段 PHP 加到主题 functions.php（建议子主题）

文件在你的主题目录下/wp-content/themes

// 前台注入“代码复制按钮”脚本与样式，加在最末尾
add_action('wp_enqueue_scripts', function () {
    $css = <<<CSS
/* 外层包裹，专门给复制按钮定位 */
.code-copy-wrap{
  position: relative;
}

/* 按钮固定在右上角 */
.code-copy-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255,255,255,.14);
  color: #fff;
  white-space: nowrap;
}
.code-copy-btn:hover{ background: rgba(255,255,255,.24); }
.code-copy-btn.copied{ background:#16a34a; color:#fff; }

/* 给代码顶部留出按钮空间，避免遮挡 */
.code-copy-wrap pre{
  margin: 0;
  padding-top: 34px !important;
}
CSS;

    $js = <<<JS
document.addEventListener('DOMContentLoaded', function () {
  var pres = document.querySelectorAll('pre');
  pres.forEach(function(pre){
    var code = pre.querySelector('code');
    if (!code) return;

    // 防重复
    if (pre.parentElement && pre.parentElement.classList.contains('code-copy-wrap')) return;

    // 包一层容器
    var wrap = document.createElement('div');
    wrap.className = 'code-copy-wrap';
    pre.parentNode.insertBefore(wrap, pre);
    wrap.appendChild(pre);

    // 按钮
    var btn = document.createElement('button');
    btn.className = 'code-copy-btn';
    btn.type = 'button';
    btn.textContent = '复制';
    wrap.appendChild(btn);

    btn.addEventListener('click', async function(){
      var text = code.innerText || code.textContent || '';
      try{
        await navigator.clipboard.writeText(text);
        btn.textContent = '已复制';
        btn.classList.add('copied');
        setTimeout(function(){
          btn.textContent = '复制';
          btn.classList.remove('copied');
        }, 1400);
      }catch(e){
        var ta = document.createElement('textarea');
        ta.value = text;
        document.body.appendChild(ta);
        ta.select();
        try{ document.execCommand('copy'); btn.textContent = '已复制'; }
        catch(err){ btn.textContent = '失败'; }
        document.body.removeChild(ta);
        setTimeout(function(){ btn.textContent='复制'; }, 1400);
      }
    });
  });
});
JS;

    wp_register_style('code-copy-inline-style', false);
    wp_enqueue_style('code-copy-inline-style');
    wp_add_inline_style('code-copy-inline-style', $css);

    wp_register_script('code-copy-inline-script', '', [], null, true);
    wp_enqueue_script('code-copy-inline-script');
    wp_add_inline_script('code-copy-inline-script', $js);
});