<!-- Start Code Block -->
<div class="code-container">
<pre><code id="code-block">
# Example Python Code
def hello_world():
print("Hello, World!")
hello_world()
</code></pre>
<button class="copy-btn" onclick="copyCode()">Copy Code</button>
</div>
<!-- Add Styling for the Code Block -->
<style>
.code-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
overflow-x: auto;
}
pre {
margin: 0;
padding: 10px;
background-color: #2d2d2d;
color: #f5f5f5;
font-family: Consolas, monospace;
font-size: 14px;
overflow-x: auto;
}
button.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 3px;
}
button.copy-btn:hover {
background-color: #45a049;
}
</style>
<!-- Add JavaScript for Copy Functionality -->
<script>
function copyCode() {
var code = document.getElementById("code-block");
// Create a temporary input element to copy the code
var tempInput = document.createElement("input");
document.body.appendChild(tempInput);
tempInput.value = code.textContent || code.innerText;
// Select and copy the code
tempInput.select();
document.execCommand('copy');
// Remove the temporary input element
document.body.removeChild(tempInput);
// Optionally, you can display a message that code was copied
alert('Code copied to clipboard!');
}
</script>
<!-- End Code Block -->
0 Komentar untuk "Testing"