WordPress如何添加代码高亮并且实现代码一键复制（不装任何插件）

---

实现wordpress网站代码高亮的方法有很多。我们这里讲利用highlight.js来实现的方法，

Highlight.js 官网：

https://highlightjs.org/

Github:

https://github.com/highlightjs/highlight.js

在github上可以找到不同样式，替换css文件即可。

我们首先下载highlight.min.js文件和default.min.css文件，在wp的函数文件里通过wp_enqueue_style和wp_enqueue_script导入。

然后，我们可以通过任意方式在任意地方（比方说系统的js文件里，比方说footer.php里，比方说函数文件里通过wp_footer钩子加载），来添加启动初始化Highligh.js:

hljs.highlightAll();

这样就实现了代码的高亮，不同语言高亮方式有轻微不同，如果想要更精确，可以在后台发布代码的时候在区块，高级那里添加css: language-当前代码语言即可。

具体详细使用可见官方文档：

https://highlightjs.org/usage/

如何添加复制功能

首先我们在主题的主要js文件中，添加复制的按钮到pre code前面：

var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
  pres[i].innerHTML = '<button class="copy-button" onclick="copyCode(this)">复制</button>' + pres[i].innerHTML;
}

我们设置了按钮添加的函数是copyCode，我们在js文件里添加这个函数：

function copyCode(el) {
  console.log('You click the console.log');
  var range = document.createRange();
  console.log(range);
  range.selectNode(el.nextElementSibling);


  // range.selectNode(el.previousSibling);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  try {
    document.execCommand('copy');
    alert('成功复制代码到剪切板');
  } catch (err) {
    alert('Unable to copy code');
  }
  
  
  window.getSelection().removeAllRanges();
}

其中range.selectNode(el.nextElementSibling); 里面选择的dom有点点可能不一样，你直接在js里面打印console.log(range); 来看看 这个node到底选择哪个即可，是选择parent还是sibling还是nextElementSibling.

如果有喜欢美化的朋友还可以美化当前窗口，比方说利用sweetalert.js进行美化等。

---