WP+highlight.js实现实现代码高亮+一键复制代码（无插件实现和用插件实现）

一、背景

作为一个还拥有独立博客，用来记录开发文章，且是wordPress坚定的拥趸者，肯定需要代码高亮。

之前我用的是高亮插件，但是因为安全问题，我禁用了，得手动配置和启用代码高亮。

也在网上查过是否有可替代方案，但是查了查，还是决定就直接用通用的highlight-js来实现代码的高亮。

这样干净，无侵入，更重要的是安全无害，且也很容易实现。

二、为什么选择highlight.js

在很久之前就已经使用过这款强大的代码高亮JS库，而且wp很多代码高亮插件底层也用的是它。

更重要的是它完全可按需配置，最少只需要3行代码，非常轻量化。

而且它发布了各个平台的版本，支持ES6的import方式，也支持nodejs环境或者浏览器直接引入使用。

具体见官网的描述：

The Internet's favorite JavaScript syntax highlighter supporting Node.js and the web.

192 languages and 498 themes
Automatic language detection
Works with any HTML markup
Zero dependencies
Compatible with any JS framework
Supports Node.js and Deno
Current release: 11.9.0

https://highlightjs.org

二、实现方案

1、代码高亮

大体思路就是，在WordPress的主题下的single.php中新增如下3行代码即可。

1、新增CSS
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@10.7.3/styles/a11y-dark.min.css?ver=10.7.3" type="text/css" media="all">
2、新增JS
<script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.3/highlight.min.js?ver=10.7.3" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
3、调用
<script>
     hljs.highlightAll(); 
    // 如果用的是highlightjs低于10的版本，需要用下面这个方法调用
    hljs.initHighlightingOnLoad();
</script>

我用的是国外的CDN服务商unpkg，在国内速度也是非常快，但国内已经不能直接访问jsdelivr.net。其他备选CDN是cloudflare.com

最佳实践建议，CSS样式放在WP主题的header.php中，其他的JS和调用放在footer.php中。

而且如果你只是想在single.php中生效，那么可以添加判断条件：

<?php if ( is_singular() ){ ?>
        <script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.3/highlight.min.js?ver=10.7.3" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            hljs.highlightAll(); 
        </script>
<?php } ?>

效果：

2、实现一键复制功能（可选）

为了增加用户体验，我需要在pre>code中新增一键复制功能，而且打算用纯JS实现。以下是实现代码，你只需要将该代码，放在:

<script>
    hljs.highlightAll(); 
    //以下是一键复制的代码
</script>

即可：

// 详情页，代码quote添加复制按钮
document.addEventListener('DOMContentLoaded', function () {
    const blocks = document.querySelectorAll('pre > code');

    blocks.forEach((codeBlock) => {
        const pre = codeBlock.parentElement;
        // 创建复制按钮-我的主题用的是bootstrap，所以，按钮class为bootstrap的按钮风格
        const button = document.createElement('button');
        button.innerText = '复制';
        button.className = 'btn btn-info btn-sm';

        // 设置按钮样式
        Object.assign(button.style, {
            position: 'absolute',
            fontFamily: 'initial',
            top: '8px',
            right: '8px',
            zIndex: 10
        });

        // 设置 为 relative 定位
        pre.style.position = 'relative';

        // 插入按钮
        pre.appendChild(button);

        // 绑定复制事件
        button.addEventListener('click', () => {
            const text = codeBlock.innerText;
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);

            button.innerText = '已复制';
            setTimeout(() => {
                button.innerText = '复制';
            }, 1500);
        });
    });
});