在接触Blogger之前我没有想到会接触Html代码，之前也几乎不会Html。所以这个教程完全是从网络上找来的教程并结合gpt完成的首先，我们需要准备两个代码插入到html中
第一个代码是
<style>
pre {
font-size: 18px;
color: #fff;
border-radius: 8px;
border: 2px solid #2E2E2E;
background-color: #343434;
padding: 5px 10px;
position: relative;
display: block;
width: auto;
max-height: 500px;
font-family: "Lucida Console", Consolas, Monaco;
word-break: break-all;
overflow: auto;
}
pre code {
overflow: auto;
}
.line-numbers {
position: absolute;
left: -40px; /* 调整行号位置 */
top: 0; /* 确保行号垂直居中 */
color: #ff0; /* 行号颜色 */
user-select: none; /* 防止行号被复制 */
}
pre code::before {
content: "c++ ";
position: absolute;
left: -2px; /* 调整行号位置 */
top: 0; /*确保行号垂直居中 */
color: #ff0; /* 行号颜色 */
user-select: none; /* 防止行号被复制 */
}
/* Copy code button styles */
.copy-code-button {
position: absolute;
top: 2px;
/* [disabled]padding-left: 1em; */
/* [disabled]padding-bottom: 0.5em; */
font-size: 14px;
background-color: #747474;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
padding-top: 0px;
/* [disabled]left: 30%; */
/* [disabled]bottom: 700%; */
right: 2px;
}
</style>
第二个代码是
<style>
.container {
position: relative;
margin-bottom: 20px; /* 为了给按钮腾出空间 */
}
.copy-code-button {
position: absolute;
padding: 5px 10px;
}
</style>
<script>
document.querySelectorAll(".copy-code-button").forEach(function(button) {
button.addEventListener("click", function() {
var codeElement = this.parentElement.querySelector("code");
var textarea = document.createElement("textarea");
textarea.value = codeElement.innerText;
document.body.appendChild(textarea);
textarea.select();
setTimeout(function() {
try {
document.execCommand("copy");
button.innerText = "已复制到剪切板";
} catch (err) {
console.error("无法复制: ", err);
} finally {
document.body.removeChild(textarea);
setTimeout(function() {
button.innerText = "复制";
}, 1500);
}
}, 100);
});
});
function updateButtonPosition() {
var rect = codeElement.getBoundingClientRect();
button.style.top = (rect.top + window.scrollY) + "px";
button.style.left = (rect.right - button.offsetWidth) + "px";
}
updateButtonPosition();
window.addEventListener("resize", updateButtonPosition);
window.addEventListener("scroll", updateButtonPosition);
</script>
第一个代码复制到<head>后，</head>前，第二个代码复制到</body>前。 代码的运行
在要添加的代码前后加上
<pre>
<code>
这里添加代码
</code>
<button class="copy-code-button">复制</button>
</pre>
...
