在 Blogger 中为代码块添加“复制”按钮的教程

日期：

在 Blogger 中为代码块添加“复制”按钮的教程

本文记录了我在 Blogger 中为代码块添加“复制”按钮的步骤和代码，适合技术博客使用。以下是简洁的实现过程。

目标

为 Blogger 代码块添加“复制”按钮，并优化样式。

步骤

  1. 编辑模板：登录 Blogger > “主题” > “编辑 HTML”。
  2. 添加 CSS：在 <head> 内插入样式。
  3. 添加 JavaScript：在 </body> 前插入脚本。
  4. 调整文章：在文章“HTML”视图中，用 <pre> 包裹代码。
  5. 测试：保存主题，预览文章，确认按钮生效。

代码

1. CSS（放在 <head> 内）

<style>
pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 30px 10px 10px 10px;
    border-radius: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
    position: relative;
    border: 1px solid #444;
    box-shadow: 0 2px 4px #0005;
}
.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #444;
    color: #f8f8f2;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}
.copy-button:hover {
    background-color: #555;
}
.copy-button::after {
    content: 'Click to Copy'; /* 英文提示 */
    position: absolute;
    top: -25px;
    right: 0;
    background-color: #333;
    color: #f8f8f2;
    padding: 5px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s;
}
.copy-button:hover::after {
    opacity: 1;
}
</style>

2. JavaScript（放在 </body> 前）


<script>
document.addEventListener('DOMContentLoaded', function() {
    var pres = document.querySelectorAll('pre');
    pres.forEach(function(pre) {
        var existingCode = pre.querySelector('code');
        if (!existingCode) {
            var code = document.createElement('code');
            code.innerText = pre.innerText.trim();
            pre.innerHTML = '';
            pre.appendChild(code);
        }
        if (!pre.querySelector('.copy-button')) {
            var button = document.createElement('button');
            button.classList.add('copy-button');
            button.textContent = 'Copy';
            button.addEventListener('click', function() {
                var text = pre.querySelector('code').innerText;
                navigator.clipboard.writeText(text).then(function() {
                    button.textContent = 'Copied!';
                    setTimeout(function() {
                        button.textContent = 'Copy';
                    }, 1000);
                }, function() {
                    button.textContent = 'Failed';
                    setTimeout(function() {
                        button.textContent = 'Copy';
                    }, 1000);
                });
            });
            pre.appendChild(button);
        }
    });
});
</script>

3. 文章中代码示例

<pre>你的代码在这里</pre>

注意事项

  • 确保文章中有 <pre> 标签。
  • 按钮字体大小设为 12px，可根据需要调整。
  • 保存前备份模板。

结果

所有 <pre> 代码块显示“复制”按钮，点击可复制内容，字体大小适中。




评论

发表评论