blogger显示代码
前言
blogger里没有直接的代码块，本期将通过插入css样式来高亮显示代码块
实现
添加代码主题背景-自定义-修改 HTML
在<head></head>之间加入：
<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: 200px;
font-family: "Cambria", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
overflow: auto; /* 设置滑动条 */
}
/* 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>
在</body>之前加入：
<style>
// Add click event listener to each copy code button为每个复制代码按钮添加点击事件监听器
document.querySelectorAll(".copy-code-button").forEach(function(button) {
button.addEventListener("click", function() {
// Get the code element获取代码元素
var codeElement = this.parentElement.querySelector("code");
// Create a temporary textarea to copy the code创建一个临时文本区域来复制代码
var textarea = document.createElement("textarea");
textarea.value = codeElement.innerText;
document.body.appendChild(textarea);
// Select and copy the code选择并复制代码
textarea.select();
document.execCommand("copy");
// Remove the temporary textarea删除临时文本区域
document.body.removeChild(textarea);
// Change the button text to "Copied!" for a short duration将按钮文本更改为“已复制！” 短期内
var originalText = this.innerText;
this.innerText = "Copied!";
setTimeout(function() {
button.innerText = originalText;
}, 1500);
});
});
</style>
使用说明
<pre>
<code>
代码内容
</code>
<button class="copy-code-button">复制</button>
</pre>
注意事项
html代码需要将<修改成< 将>修改成>
评论
发表评论