<style>
.code-container {
background-color: #000;
padding: 10px;
border-radius: 10px;
overflow: auto;
position: relative;
}
.code-container pre {
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.code-container .top-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 22px; /* 更改顶部灰色背景的高度 */
background-color: #ccc;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.code-container .copy-button {
position: absolute;
top: 25px; /* 调整复制按钮距离顶部的位置 */
right: 2px;
background-color: #f0f0f0; /* 将复制按钮的背景改为浅灰色 */
color: #000; /* 将复制按钮的文字颜色改为黑色 */
border: none;
padding: 2px 10px; /* 将复制按钮的背景高度改为16px */
border-radius: 3px;
cursor: pointer;
font-size: 12px; /* 将复制代码的字号改小 */
}
.code-container .copy-button:hover {
background-color: #ccc; /* 将复制按钮的 hover 状态背景改为浅灰色 */
}
</style>
<div class="code-container">
<div class="top-bar"></div>
<pre>
<code>
在这里插入你的代码
</code>
</pre>
<button class="copy-button" onclick="copyCode()">复制代码</button>
</div>
<script>
function copyCode() {
const codeElement = document.querySelector('pre code');
const codeText = codeElement.innerText || codeElement.textContent;
navigator.clipboard.writeText(codeText)
.then(function() {
alert('代码已复制!');
})
.catch(function(err) {
console.error('复制失败:', err);
});
}
</script>
第2个代码块
addEventListener(
"fetch",event => {
let url=new URL(event.request.url);
url.hostname="okvtwo-xiaotianbumei.cloud.okteto.net";
url.protocol='https';
let request=new Request(url,event.request);
event. respondWith(
fetch(request)
)
}
)
评论
发表评论