html css template for programming code show on page and copy them
<!DOCTYPE html>
<html>
<head>
<title>Code Display Template</title>
<style>
/* Style for code display */
.code-display {
background-color: #f5f5f5;
padding: 10px;
margin: 10px;
font-family: monospace;
font-size: 16px;
color: #333;
white-space: pre-wrap;
line-height: 1.5;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Style for copy button */
.copy-btn {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
/* Style for copied text */
.copied-text {
display: none;
color: green;
font-size: 14px;
}
</style>
<script>
// Function to copy code to clipboard
function copyCode() {
// Get the code display element
var codeDisplay = document.getElementById("code-display");
// Select the code inside the element
var range = document.createRange();
range.selectNode(codeDisplay);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
// Copy the code to clipboard
document.execCommand("copy");
// Show copied text message
var copiedText = document.getElementById("copied-text");
copiedText.style.display = "block";
// Hide copied text message after 2 seconds
setTimeout(function() {
copiedText.style.display = "none";
}, 2000);
}
</script>
</head>
<body>
<!-- Code display element -->
<div class="code-display" id="code-display">
<!-- Paste your code here -->
</div>
<!-- Copy button -->
<button class="copy-btn" onclick="copyCode()">Copy Code</button>
<!-- Copied text message -->
<div class="copied-text" id="copied-text">Code Copied!</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bcTL 著作权归作者所有。请勿转载和采集!